本文将从打包分析，速度优化，体积优化三个方面进行阐述
打包分析
-
初级分析: webpack内置的stats(构建的统计信息)
webpack --config webpack.prod.js --json > stats.json
-
速度分析：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()]})
-
体积分析: webpack-bundle-analyzer分析依赖的第三方模块文件和业务里面的组件代码大小
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {plugins: [new BundleAnalyzerPlugin()]}
速度优化
-
使用高版本的webpack
-
多进程构建
-
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核心数}}}]}}
-
多进程并行压缩代码
const TerserPlugin = require('terser-webpack-plugin');module.exports = {optimization: {minimize: true,minimizer: [new TerserPlugin({parallel: true})]}}
-
预编译资源模块
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>
-
基础库分离
-
通过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>
-
通过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"],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}}}}}
-
利用缓存：第一次构建花费正常的时间，第二次构建速度将显著加快、
-
babel-loader开启缓存
module: {rules: [{test: /\.js$/,exclude: 'node_modules',use: {loader: 'babel-loader',options: {cacheDirectory: true}}}]}
-
erser-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')}]}}
-
缩小构建目标
-
babel-loader不解析node-modules
exclude: "node-modules"
-
减少文件搜索范围
module: {resolve: {alias: {react: path.resolve(__dirname, "./node_modules/react/dist/react.min.js")},modules: [path.resolve(__dirname, "node_modules")],extensions: [".js"],mainFields: ["main"]}}
体积优化
-
Scope Hoisting
webpack4 mode 为 production 默认开启
plugins:
new webpack.optimize.ModuleConcatenationPlugin()
-
使用Tree shaking擦除无用的javaScript和css
-
概念：1个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到 bundle ⾥去，tree shaking 就是只把用到的方法打⼊ bundle ，没⽤到的方法会在 uglify 阶段被擦除掉。
-
使⽤：webpack production mode的情况下默认开启
-
要求： 必须是 ES6 的语法，CJS的方式不支持
-
CSS：purgecss-webpack-plugin 和 mini-css-extract-plugin 配合使用
-
图片压缩
loader: "image-webpack-loader"-
使用动态polyfill-service或者browserlist
