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来判断当前浏览器缺失哪些特性，进而进行补强
