一.sourceMap: 是一个映射关系,如果出错可以知道实际文件行数出错
在webpack.config.js设置属性
devtool: 'source-map'
在生产环境可以设置为(提醒错误比较全面)
devtool: 'cheap-module-eval-source-map'
在线上环境设置为(比较合适)
devtool: 'cheap-module-source-map'
https://segmentfault.com/a/1190000008315937https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.htmlhttps://www.youtube.com/watch?v=NkVes0UMe9Y
二.@babel 将ES6自动转为ES5,还可设置自动加载ES6函数
三.Tree Shaking: 根据引用的内容自动选择加载内容 但因为是静态引入方式,所以功能只支持ES module,不支持COMMON JS
线上和线下模式打包引入结果不一样,线下模式会全部引入,但是在线上模式只会引入需要的模块.,就是判断只要引入一个模块,就会采用Tree Shaking方式进行打包
在package.json文件中
"sideEffects": ["@babel/polyfill"], 如果有需要特殊处理的模块,比如会忽略对 @babel/polyfill的处理 "sideEffects": false, 如果没有特殊处理的模块,就可以设为false在webpack.config.js中
optimization: { usedExports: true }四.Code Spliting
4.1t同步代码:
在配置文件webpack.config.js中
optimization: { splitChunks: { chunks: 'all' } }4.2异步代码,会自动进行代码分割
首先安装插件 npm install --save-dev @babel/plugin-syntax-dynamic-import
在 .babelrc 中配置plugins加入
{ "plugins": ["@babel/plugin-syntax-dynamic-import"] }4.3 SplitChunksPlugin配置
https://webpack.js.org/plugins/split-chunks-plugin/
五.Bundle Analysis 分析工具
https://webpack.js.org/guides/code-splitting/#bundle-analysis
可视化较强的是webpack-bundle-analyzer
六.懒加载
https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules
七.CSS打包 MiniCssExtractPlugin
CSS合并和压缩: optimize-css-assets-webpack-plugin
PS:因为不支持HMR,所以只在production模式下使用这个CSS打包压缩功能
八.去除一些性能提醒
在webpack.config.js中添加属性
performance: false,
九.浏览器缓存caching
在配置文件output的打包目录的文件命名上加上 [contenthash] , 会根据文件内容进行hash
十.(在plugins中加入配置)自动引入模块 ProvidePlugin (因为在webpack中模块之间是隔离的)这样可以全局引入
new webpack.ProvidePlugin({ $: 'jquery', // ... });十一.将模块js文件中的this指向window
需要先安装imports-loader
在webpack.config.js中加入代码
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: [ { loader: "babel-loader", }, { loader: "imports-loader?this=>window" } ] } }十二.全局变量
在package.json文件中 可以设置env全局变量,这样可以直接访问webpack.common.js这一个配置文件中而实现线上和线下模式
"dev-build": "webpack --config ./build/webpack.common.js", "dev": "webpack-dev-server --config ./build/webpack.common.js", "build": "webpack --env.production --config ./build/webpack.common.js"
转载于:https://www.cnblogs.com/init-007/p/11348676.html
