webpack4心得编译篇&体积篇

背景众所周知，webpack作为主流的前端项目利器，从编译到打包提供了很多方便的功能。本文主要从编译和体积两个篇章阐述笔者总结的实践心得，希望对大家有帮助。编译篇vendor文件单独打包vendor文件即依赖库文件，一般在项目中很少改动。单独打包可以在后续的项目迭代过程中，保证vendor文件可从客户端缓存读取，提升客户端的访问体验。 解决方案：通过在vendor.config.js文件中定义，在webpack.config.{evn}.js中引用来使用。 vendor.config.js示例module.exports = { entry: { vendor: [‘react’, ‘react-dom’, ‘react-redux’, ‘react-router-dom’, ‘react-loadable’, ‘axios’], }};vendor文件预打包vendor单独打包之后，还是有一个问题。编译的过程中，每次都需要对vendor文件进行打包，其实这一块要是可以提前打包好，那后续编译的时候，就可以节约这部分的时间了。 解决方案：定义webpack.dll.config.js，使用 DLLPlugin 提前执行打包，然后在webpack.config.{evn}.js通过 DLLReferencePlugin 引入打包好的文件，最后使用AddAssetHtmlPlugin往html里注入vendor文件路径webpack.dll.config.js示例const TerserPlugin = require(’terser-webpack-plugin’);const CleanWebpackPlugin = require(“clean-webpack-plugin”);const webpack = require(‘webpack’);const path = require(‘path’);const dllDist = path.join(__dirname, ‘dist’);module.exports = { entry: { vendor: [‘react’, ‘react-dom’, ‘react-redux’, ‘react-router-dom’, ‘react-loadable’, ‘axios’, ‘moment’], }, output: { path: const dllDist = path.join(__dirname, ‘dist’), filename: ‘[name]-[hash].js’, library: ‘[name]’, }, optimization: { minimizer: [ new TerserPlugin({ terserOptions: { parse: { ecma: 8, }, compress: { ecma: 5, warnings: false, comparisons: false, inline: 2, }, mangle: { safari10: true, }, output: { ecma: 5, comments: false, ascii_only: true, }, }, parallel: true, cache: true, sourceMap: false, }), ], }, plugins: [ new CleanWebpackPlugin([".js"], { // 清除之前的dll文件 root: dllDist, }), new webpack.IgnorePlugin(/^./locale$/, /moment$/), new webpack.DllPlugin({ path: path.join(__dirname, ‘dll’, ‘[name]-manifest.json’), name: ‘[name]’, }), ]};webpack.config.prod.js片段const manifest = require(’./dll/vendor-manifest.json’);const AddAssetHtmlPlugin = require(‘add-asset-html-webpack-plugin’);…plugins: [ // webpack读取到vendor的manifest文件对于vendor的依赖不会进行编译打包 new webpack.DllReferencePlugin({ manifest, }), // 往html中注入vendor js new AddAssetHtmlPlugin([{ publicPath: “/view/static/js”, // 注入到html中的路径 outputPath: “../build/static/js”, // 最终输出的目录 filepath: path.resolve(__dirname, ‘./dist/.js’), includeSourcemap: false, typeOfAsset: “js” }]),]js并行编译与压缩webpack对文件的编译处理是单进程的，但实际上我们的编译机器通常是多核多进程，如果可以充分利用cpu的运算力，可以提升很大的编译速度。 解决方案：使用happypack进行多进程构建，使用webpack4内置的TerserPlugin并行模式进行js的压缩。 说明：happypack原理可参考http://taobaofed.org/blog/201…webpack.config.prod.js片段const HappyPack = require(‘happypack’);// 采用多进程，进程数由CPU核数决定const happThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });…optimization: { minimizer: [ new TerserPlugin({ terserOptions: { parse: { ecma: 8, }, compress: { ecma: 5, warnings: false, comparisons: false, inline: 2, }, mangle: { safari10: true, }, output: { ecma: 5, comments: false, ascii_only: true, }, }, parallel: true, cache: true, sourceMap: false, }), ]},module: { rules: [ { test: /.css$/, oneOf: [ { test: /.(js|mjs|jsx)$/, include: paths.appSrc, loader: ‘happypack/loader’, options: { cacheDirectory: true, }, }, ] } ]},plugins: [ new HappyPack({ threadPool: happThreadPool, loaders: [{ loader: ‘babel-loader’, }] }),]体积篇按需加载当js页面特别多的时候，如果都打包成一个文件，那么很影响访问页面访问的速度。理想的情况下，是到相应页面的时候才下载相应页面的js。解决方案：使用import(‘path/to/module’) -> Promise。调用 import() 之处，被作为分离的模块起点，意思是，被请求的模块和它引用的所有子模块，会分离到一个单独的 chunk 中。说明: 老版本使用require.ensure(dependencies, callback)进行按需加载，webpack > 2.4 的版本此方法已经被import()取代一般例子按需加载demo，在非本地的环境下开启监控上报if (process.env.APP_ENV !== ’local’) { import("./utils/emonitor").then(({emonitorReport}) => { emonitorReport(); });}react例子react页面按需加载，可参考http://react.html.cn/docs/cod…，里面提到的React.lazy,React.Suspense是在react 16.6版本之后才有的新特性，对于老版本，官方依然推荐使用react-loadable实现路由懒加载react-loadable示例import React, { Component } from ‘react’;import { Route, Switch } from ‘react-router-dom’;import Loadable from ‘react-loadable’;import React, { Component } from ‘react’;// 经过包装的组件会在访问相应的页面时才异步地加载相应的jsconst Home = Loadable({ loader: () => import(’./page/Home’), loading: (() => null), delay: 1000,});import NotFound from ‘@/components/pages/NotFound’;class CRouter extends Component { render() { return ( <Switch> <Route exact path=’/’ component={Home}/> {/* 如果没有匹配到任何一个Route, <NotFound>会被渲染*/} <Route component={NotFound}/> </Switch> ) }}export default CRoutervue例子vue页面按需加载，可参考https://router.vuejs.org/zh/g…示例// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。const ImportFuncDemo1 = () => import(’../components/ImportFuncDemo1’)const ImportFuncDemo2 = () => import(’../components/ImportFuncDemo2’)// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。// const ImportFuncDemo = () => import(/* webpackChunkName: ‘ImportFuncDemo’ / ‘../components/ImportFuncDemo’)// const ImportFuncDemo2 = () => import(/ webpackChunkName: ‘ImportFuncDemo’ */ ‘../components/ImportFuncDemo2’)export default new Router({ routes: [ { path: ‘/importfuncdemo1’, name: ‘ImportFuncDemo1’, component: ImportFuncDemo1 }, { path: ‘/importfuncdemo2’, name: ‘ImportFuncDemo2’, component: ImportFuncDemo2 } ]})css预加载做完按需加载之后，假如定义的分离点里包含了css文件，那么相关css样式也会被打包进js chunk里，并通过URL.createObjectURL(blob)的方式加载到页面中。假如n个页面引用了共同的css样式，无形中也增加n倍的 css in js体积。通过css预加载，把共同css提炼到html link标签里，可以优化这部分的体积。解决方案：把分离点里的页面css引用（包括less和sass）提炼到index.less中，在index.js文件中引用。假如使用到库的less文件特别多，可以定义一个cssVendor.js，在index.js中引用，并在webpack config中添加一个entry以配合MiniCssExtractPlugin做css抽离。P.S. 假如用到antd或其他第三方UI库，按需加载的时候记得把css引入选项取消，把 style: true选项删掉示例cssVendor片段// 全局引用的组件的样式预加载，按需引用，可优化异步加载的chunk js体积// Rowimport ‘antd/es/row/style/index.js’;// Colimport ‘antd/es/col/style/index.js’;// Cardimport ‘antd/es/card/style/index.js’;// Iconimport ‘antd/es/icon/style/index.js’;// Modalimport ‘antd/es/modal/style/index.js’;// messageimport ‘antd/es/message/style/index.js’;…webpack.config.production片段 entry: { main: [paths.appIndexJs, paths.cssVendorJs] }， plugins: [ new HappyPack({ threadPool: happThreadPool, loaders: [{ loader: ‘babel-loader’, options: { customize: require.resolve( ‘babel-preset-react-app/webpack-overrides’ ), plugins: [ [ require.resolve(‘babel-plugin-named-asset-import’), { loaderMap: { svg: { ReactComponent: ‘@svgr/webpack?-prettier,-svgo![path]’, }, }, }, ], [‘import’, { libraryName: ‘antd’, libraryDirectory: ’es’ }, ], ], cacheDirectory: true, cacheCompression: true, compact: true, }, }], })]按需打包我们在项目的开发中经常会引用一些第三方库，例如antd，lodash。这些库在我们的项目中默认是全量引入的，但其实我们只用到库里的某些组件或者是某些函数，那么按需只打包我们引用的组件或函数就可以减少js相当大一部分的体积。解决方案：使用babel-plugin-import插件来实现按需打包，具体使用方式可参考https://github.com/ant-design…示例{ test: /.(js|jsx)$/, include: paths.appSrc, loader: require.resolve(‘babel-loader’), exclude: /node_modules/, options: { plugins: [ [‘import’, [ { libraryName: ’lodash’, libraryDirectory: ‘’, “camel2DashComponentName”: false, }, { libraryName: ‘antd’, style: true } ] ], ], compact: true, },}忽略不必要的文件有些包含多语言的库会将所有本地化内容和核心功能一起打包，于是打包出来的js里会包含很多多语言的配置文件，这些配置文件如果不打包进来，也可以减少js的体积。解决方案：使用IgnorePlugin插件忽略指定资源路径的打包示例new webpack.IgnorePlugin(/^./locale$/, /moment$/)压缩压缩是一道常规的生产工序，前端项目编译出来的文件经过压缩混淆，可以把体积进一步缩小。解决方案：使用TerserPlugin插件进行js压缩，使用OptimizeCSSAssetsPlugin插件css压缩说明：webpack4之前js压缩推荐使用ParalleUglifyPlugin插件，它在UglifyJsPlugin的基础上做了多进程并行处理的优化，速度更快；css压缩推荐使用cssnano,它基于PostCSS。因为css-loader已经将其内置了，要开启cssnano去压缩代码只需要开启css-loader的minimize选项。示例minimizer: [ new TerserPlugin({ terserOptions: { parse: { ecma: 8, }, compress: { ecma: 5, warnings: false, comparisons: false, inline: 2, }, mangle: { safari10: true, }, output: { ecma: 5, comments: false, ascii_only: true, }, }, parallel: true, cache: true, sourceMap: shouldUseSourceMap, }), new OptimizeCSSAssetsPlugin({ cssProcessorOptions: { parser: safePostCssParser, map: shouldUseSourceMap ? { inline: false, annotation: true, } : false, }, }),]抽离共同文件在很多chunks里，有相同的依赖，把这些依赖抽离为一个公共的文件，则可以有效地减少资源的体积，并可以充分利用浏览器缓存。解决方案：使用SplitChunksPlugin抽离共同文件P.S. webpack4使用SplitChunksPlugin代替了CommonsChunkPlugin 示例optimization: { splitChunks: { chunks: ‘all’, name: false }}SplitChunksPlugin的具体配置可参考 https://juejin.im/post/5af15e…开启Scope Hoisting（作用域提升）Scope Hoisting 是webpack3中推出的新功能，可以把依赖的代码直接注入到入口文件里，减少了函数作用域的声明，也减少了js体积和内存开销举个栗子假如现在有两个文件分别是 util.js:export default ‘Hello,Webpack’;和入口文件 main.js:import str from ‘./util.js’;console.log(str);以上源码用 Webpack 打包后输出中的部分代码如下：[ (function (module, webpack_exports, webpack_require) { var WEBPACK_IMPORTED_MODULE_0__util_js = webpack_require(1); console.log(WEBPACK_IMPORTED_MODULE_0__util_js[“a”]); }), (function (module, webpack_exports, webpack_require) { webpack_exports[“a”] = (‘Hello,Webpack’); })]在开启 Scope Hoisting 后，同样的源码输出的部分代码如下：[ (function (module, webpack_exports, webpack_require) { var util = (‘Hello,Webpack’); console.log(util); })]从中可以看出开启 Scope Hoisting 后，函数申明由两个变成了一个，util.js 中定义的内容被直接注入到了 main.js 对应的模块中。 解决方案：webpack4 production mode会自动开启ModuleConcatenationPlugin，实现作用域提升。Tree Shakingtree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)有的时候，代码里或者引用的模块里包含里一些没被使用的代码块，打包的时候也被打包到最终的文件里，增加了体积。这种时候，我们可以使用tree shaking技术来安全地删除文件中未使用的部分。使用方法：使用 ES2015 模块语法（即 import 和 export）。在项目 package.json 文件中，添加一个 “sideEffects” 属性。引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 UglifyJSPlugin）。分析工具在体积优化的路上，我们可以使用工具来分析我们打包出的体积最终优化成怎样的效果。常用的工具有两个：webpack-bundle-analyzer使用需要在webpack.config.js中配置plugins: [ new BundleAnalyzerPlugin()]执行完build后会打开网页，效果图如下：source-map-explorersource-map-explorer是根据source-map去分析出打包文件的体积大小，在本地调试是时设置 devtool: true，然后执行source-map-explorer build/static/js/main.js则可以去分析指定js的体积。效果图如下：