webpack打包优化
本文将从打包分析，速度优化，体积优化三个方面进行阐述javascript
打包分析css
-
初级分析: webpack内置的stats(构建的统计信息)html
webpack --config webpack.prod.js --json > stats.json
-
速度分析：speed-measure-webpack-plugin（分析整个打包总耗时&每一个插件和loader的耗时状况）html5
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const webpackConfig = smp.wrap({ plugins: [ new MyPlugin(), new MyOtherPlugin() ] })
-
体积分析: webpack-bundle-analyzer分析依赖的第三方模块文件和业务里面的组件代码大小java
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = { plugins: [ new BundleAnalyzerPlugin() ] }
速度优化node
-
使用高版本的webpack react
-
多进程构建webpack
-
happypack：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中web
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 线程中json
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