webpack打包优化
Posted 朵拉.科波菲尔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack打包优化相关的知识,希望对你有一定的参考价值。
打包分析
1.初级分析:webpack内置的stats(构建的统计信息)
可以在 package.json 中使用 stats,也可以在 Node API 中使用 stats
webpack --config webpack.prod.js --json > stats.json
2.速度分析:speed-measure-webpack-plugin (分析整个打包总耗时&每个插件和loader的耗时情况)
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); const webpackConfig = smp.wrap({ plugins: [ new MyPlugin(), new MyOtherPlugin() ] });
3.体积分析:webpack-bundle-analyzer(分析依赖的第三方模块文件和业务里面的组件代码大小)
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] }
速度优化
1.使用高版本的webpack
webpack4 增加了一个叫mode的配置项
production默认值会提供一系列有效的默认值以便部署应用
optimization.splitChunks总是启用
2.多进程构建
happypack: 每次 webapck 解析一个模块,HappyPack 会将它及它的依赖分配给 worker 线程中
exports.plugins = [ new HappyPack({ id: ‘jsx‘, threads: 4, loaders: [ ‘babel-loader‘ ] }), new HappyPack({ id: ‘styles‘, threads: 2, loaders: [ ‘style-loader‘, ‘css-loader‘, ‘less-loader‘ ] }) ]; exports.module.rules = [ { test: /.js$/, use: ‘happypack/loader?id=jsx‘ }, { test: /.less$/, use: ‘happypack/loader?id=styles‘ } ]
thread-loader:每次 webpack 解析一个模块,thread- loader 会将它及它的依赖分配给 worker 线程中
module.exports = { module: { rules: [ { test: /.js$/, include: path.resolve("src"), use: [ { loader: "thread-loader" options: { workers: 2 // worker的数量,默认是cpu核心数 } } } ] } }
3.多进程并行压缩代码
terser-webpack-plugin 开启parallel参数
const TerserPlugin = require(‘terser-webpack-plugin‘); module.exports = { optimization: { minimize: true, minimizer: [ new TerserPlugin({ parallel: true }) ] } };
4.预编译资源模块:使用 DLLPlugin 进行分包, DllReferencePlugin 对 manifest.json 引用
,将react,react-dom,redux,react-redux等基础包和业务基础包打包成一个文件
webpack.dll.config.js文件
const path = require(‘path‘); const webpack = require(‘webpack‘); module.exports = { context: process.cwd, resolve: { extensions: [‘.js‘, ‘.jsx‘, ‘.json‘, ‘.styl‘, ‘.css‘], modules: [__dirname, ‘node_modules‘] }, entry: { vendor: [ ‘react‘, ‘react-dom‘, ‘react-router-dom‘ ] }, output: { path: path.resolve(__dirname, ‘./dist/lib‘), filename: ‘[name].js‘, library: ‘[name]‘ }, plugins: [ new webpack.DllPlugin({ path: path.resolve(__dirname, ‘.‘, ‘[name]-manifest.json‘), name: ‘[name]‘ }) ] };
运行 webpack --config webpack.dll.config.js --mode production 生成vendor-manifest.json文件
webpack.config.js文件
module.exports = { plugins: [ new webpack.DllReferencePlugin({ manifest: require(‘./vendor-manifest.json‘) }) ] }
html: <script type="text/javascript" src="./lib/vendor.js"></script>
5.基础库分离
(1)通过html-webpack-externals-plugin,然后在html里面直接引入组件库的cdn链接
const HtmlWebpackExternalsPlugin = require(‘html-webpack-externals-plugin‘) moudles.export = { plugins: [ new HtmlWebpackExternalsPlugin({ externals: [ { module: ‘react‘, entry: ‘//11.url.cn/now/lib/16.2.0/react.min.js‘, global: ‘React‘ }, { module: ‘react-dom‘, entry: ‘//11.url.cn/now/lib/16.2.0/react-dom.min.js‘, global: ‘ReactDom‘ } ] }) ] }
html:
<script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react.min.js"></script>
<script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react-dom.min.js"></script>
(2) 通过webpack4的SplitChunksPlugins(webpack3使用的是commonChunksPlugin)
module.exports = { plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, `./src/pages/search/search.html`), filename: `search.html`, chunks: [‘vendors‘, ‘common‘, ‘search‘], //注意这里要引入vendors跟common inject: true, minify: { html5: true, collapseWhitespace: true, preserveLineBreaks: false, minifyCSS: true, minifyJS: true, removeComments: false } }) ] optimization: { splitChunks: { minSize: 0, cacheGroups: { vendors: { test: /(react|react-dom)/, name: ‘vendors‘, chunks: ‘all‘, priority: -10 // 需要设置权重才能都分离出来 }, common: { name: ‘commons‘, chunks: ‘all‘, minChunks: 2, priority: -20 } } } } }
6.利用缓存:第一次构建花费正常的时间,第二次构建将显著加快
babel-loader 开启缓存
module: { rules: [ { test: /.js$/, exclude: ‘node_modules‘, use: { loader: ‘babel-loader‘, options: { cacheDirectory: true } } } ] }
terser-webpack-plugin 开启缓存
module.exports = { optimization: { minimize: true, minimizer: [ new TerserPlugin({ cache: true }) ] } }
使用 cache-loader 或者 hard-source-webpack-plugin
module.exports = { module: { rules: [ { test: /.js$/, use: [ ‘cache-loader‘, ‘babel-loader‘ ], include: path.resolve(‘src‘) } ] } }
7.缩小构建目标(尽可能少的构建模块)
(1)babel-loader不解析node-modules
exclude: "node-modules"
(2)减少文件搜索范围
优化 resolve.modules 配置(减少模块搜索层级)
优化 resolve.mainFields 配置
优化 resolve.extensions 配置
合理使用 alias(模块别名相对于当前上下文导入)
module: { resolve: { alias: { react: path.resolve(__dirname, ‘./node_modules/react/dist/react.min.js‘) }, modules: [path.resolve(__dirname, ‘node_modules‘)], extensions: [‘.js‘], mainFields: [‘main‘] } }
体积优化
1.Scope Hoisting
将所有模块的代码按照引?顺序放在?个函数作?域里,然后适当的重命名?些变量以防?变量名冲突
webpack4 mode 为 production 默认开启
new webpack.optimize.ModuleConcatenationPlugin()
2.使用Tree shaking擦除无用的javaScript和css
概念:1 个模块可能有多个方法,只要其中的某个方法使用到了,则整个文件都会被打到 bundle ?去,tree shaking 就是只把用到的方法打? bundle ,没?到的方法会在 uglify 阶段被擦除掉。
使?:webpack production mode的情况下默认开启
要求:必须是 ES6 的语法,CJS 的方式不支持
css:purgecss-webpack-plugin 和 mini-css-extract-plugin 配合使用
3.图片压缩
配置image-webpack-loader
loader: "image-webpack-loader"
4.使用动态polyfill-service或者browserlist
根据浏览器的UA来判断当前浏览器缺失哪些特性,进而进行补强
以上是关于webpack打包优化的主要内容,如果未能解决你的问题,请参考以下文章