Document

--- theme: awesome-green --- > **金石有声，不拷不鸣** # production模式打包自带优化 **production模式** 打包自带很多优化，例如 **tree shaking**、**scope hoisting**、**代码压缩** 等 ## tree shaking **tree shaking** 指在打包时移除JS中未使用的代码（dead code），它依赖于 **ES6模块化规范** 的静态结构特性。 - 当引入一个模块后，只使用了模块的部分功能，打包时只会将使用到的功能打包进bundle中，其他没有使用的功能不会打包进来。 - 注意 `require` 是动态导入，使用 **CommonJS模块化规范** 会影响打包时的 **tree shaking** 功能 ## scope hoisting（作用域提升） **scope hoisting** 会将模块的结果进行预测，可以让webpack打包出的文件更小运行更快。 **scope hoisting**也是基于ES6模块化规范，它是由webpack内置插件 **ModuleConcateNationPlugin**实现的。在 **production**模式下默认配置 **ModuleConcateNationPlugin**插件，其他模式默认不开启。 **示例** - 新建 **src/model.js** ```js export let a = 1 export let b = 2 export let c = 9 ``` - **main.js** 对 **model** 模块导出的变量进行计算 ```js import { a, b, c } from "./model.js"; const sub = (modelA, modelB, modelC) => ((modelA + modelB) * modelC) console.log("a、b、c求和结果", sub(a, b, c)); ``` - `npm run build` 后查看打包结果 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a7df54669774e1084cf0d6af02043fd~tplv-k3u1fbpfcp-watermark.image?) 由上面例子可以看出 **scope hoisting（作用域提升）** 的强大之处，通过它webpack在打包时可以将结果推断出来，将模块打散合并为一个函数极大的避免了代码的冗余。 ## 代码混淆、压缩在**production**模式下，webpack打包时，会通过 **UglifyJsPlugin** 插件对代码进行混淆、压缩 # css优化 ## css优化--css代码提取到单独文件中前面的css代码是直接放到 **html** 的 **style** 标签中的，当相同css代码在多个模块多个页面用到时，为提高复用性避免重复编译最好还是将css代码提取到单独文件中。 **对当前项目进行调整** 1、优化项目目录结构 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06f0ccf3357c46bca58d52d50e5d5f3e~tplv-k3u1fbpfcp-watermark.image?) 2、修改 **src/webpack.base.js** 配置打包为单页面应用 ```js module.exports = { // 1.只指定一个入口文件 entry: "./src/main.js", // entry: { // index: "./src/main.js", // other: "./src/other.js", // }, output: { path: path.resolve(__dirname, "..", "./dist"), filename: '[name].js' }, plugins: [ new HtmlPlugin( { filename: "index.html", template: "./src/index.html", // 3.也不要指定chunks 否则css可能会出现问题 // chunks: ["index", "other"] } ), // 2.单页面应用只生成一个html 删除生成other.html的HtmlPlugin插件 // new HtmlPlugin( // { // filename: "other.html", // template: "./src/other.html", // chunks: ["other"] // } // ), ] } ``` 3、**src/main.js** 导入css ```js import "./css/index.css" import "./less/index.less" ``` ### MiniCssExtractPlugin **MiniCssExtractPlugin**是将css提取未单独文件的插件，对每个包含css的js文件都单独生成一个css文件，支持按需加载css和sourceMap - 安装 `npm i mini-css-extract-plugin` - 配置plugin和loader ```js // webpack.base.js // 1.导入插件构造函数 const MiniCssExtract = require("mini-css-extract-plugin") module.exports = { plugins: [ // 2.new 一个MiniCssExtract插件实例并配置生成的css文件名 new MiniCssExtract({ filename: "main.css" }) ], module: { rules: [ { test: /\.css$/i, // 3.style-loader将css代码放入style标签中，将所有style-loader替换为MiniCssExtract的loader use: [MiniCssExtract.loader, 'css-loader'] }, { test: /\.less$/i, use: [MiniCssExtract.loader, 'css-loader', 'less-loader'] } ] } ``` - `npm run build` 打包 css被单独提取出来 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28f3ba0c6e3b4fc4b4853263622bc4d5~tplv-k3u1fbpfcp-watermark.image?) ## css优化--自动添加css属性前缀自动添加css属性前缀是通过 **postcss** 实现的，使用 **postcss** 需要用到 **postcss-loader** 和 **autoprefixer** 插件 - 安装 `npm i postcss-loader autoprefixer` - 配置loader ```js // webpack.base.js module: { rules: [ { test: /\.css$/i, // 在css-loader右侧配置'postcss-loader' 自动添加添加css属性前缀 use: [MiniCssExtract.loader, 'css-loader', 'postcss-loader'] }, { test: /\.less$/i, // 在css-loader右侧配置'postcss-loader' 自动添加添加css属性前缀 use: [MiniCssExtract.loader, 'css-loader', 'postcss-loader', 'less-loader'] } ] } ``` - 项目根目录新建 **postcss.config.js** ```js module.exports = { // postcss功能很单一，很多功能都依赖插件 "plugins": [ require('autoprefixer') ] } ``` - **package.json** 新增 **browserslist** 字段 ```js "browserslist": [ "defaults", "not ie <= 8", "last 2 versions", "> 1%", "iOS >= 7", "Android >= 4.0" ] ``` - `nom run build` 重新构建项目 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dffd5f2ab8db4574b6ba328b676dbc12~tplv-k3u1fbpfcp-watermark.image?) ## css优化--css代码压缩通过**optimize-css-assets-webpack-plugin** 插件完成css代码的压缩注意：使用这个插件会出现一个问题用生产模式打包时，webpack默认是开启js代码的压缩混淆功能的，但是如果使用 **optimize-css-assets-webpack-plugin** 会覆盖掉webpack默认优化配置，导致js代码无法压缩。所以我们需要导入插件 **terser-webpack-plugin** 来配置一下js代码压缩功能。 - 安装 `npm i optimize-css-assets-webpack-plugin terser-webpack-plugin -D` - 在配置文件中添加配置节点 ```js // webpack.prod.js // 1.导入插件 const TerserWebpackPlugin = require("terser-webpack-plugin") const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") const prodConfig = merge(baseConfig, { // 2.添加优化配置项 optimization: { minimizer: [new TerserWebpackPlugin({}), new OptimizeCSSAssetsPlugin({})] } }) ``` - 修改 **main.js** ```js import "./css/index.css" import "./less/index.less" let a = 20 let b = 30 function add(a, b) { return a + b } console.log("结果", add(a, b)); ``` - `npm run build` 把包后js/css都成功压缩 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/183c6dee29fa499386c8f56699cfb852~tplv-k3u1fbpfcp-watermark.image?) # JS代码优化 ## JS代码分离（Code Splitting） **Code Splitting** 是 **Webpack** 重要特性之一，它可以将代码分离打包到不同bundle中，然后按需加载、并行加载加载这些文件。通过合理控制这些bundle资源加载的优先级，会极大影响加加载速度。例如，SPA应用单个bundle文件过大导致首屏加载速度慢的问题。 **三种常见代码分离方法**: - 入口起点手动配置多入口，通过 `entry` 配置分离代码 - 防止重复使用`SplitChunksPlugin`去重和分离chunk，例如：a模块b模块都是用了jquery，我们要避免jquery被重复打包在两个模块中。 - 动态导入通过模块内联函数调用来分离代码，例如：路由的懒加载功能 ### 手动配置多入口 - 安装jquery `npm i jquery` - 修改 **src/main.js**，新建 **src/other.js** ```js // main.js import $ from 'jquery' $(function () { // 新建div 插入到 body中 $("

").html("这是main.js").appendTo("body") }) // other.js import $ from 'jquery' $(function () { // 新建div 插入到 body中 $("

").html("这是other.js").appendTo("body") }) ``` - 配置多入口 ```js // webpack.base.js module.exports = { entry: { // 入口文件分别为 main.js / other.js main: "./src/main.js", other: "./src/other.js" } } ``` - `npm run dev` 查看打包结果 ![1634039741(1).png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a664cd390c1f4e93bd3ac8dbf4e906f7~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d27c233bd9894adebedd8655fc4114a1~tplv-k3u1fbpfcp-watermark.image?) 可以看到每个bundle只有几行代码，大小却几百kb显然是重复的JQ模块被引入到了每个bundle中 **配置多入口会存在一些问题**： - 如果入口的chunks之间包含重复模块，那些重复模块会被引入到每个bundle中 - 这个种方法不够灵活，无法将程序核心的逻辑进行动态拆分 ### 抽取公共代码前面虽然划分了两个bundle，但是存在模块重复引入的问题。**SplitChunksPlugin**可以将公共的代码抽取出来。 - 修改配置文件 **webpack.base.js** ```js module.exports = { optimization: { splitChunks: { // 将所有的重复模块抽离出来 chunks: "all" } } } ``` - `npm run build`重新构建 JQ模块被单独抽离出来 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/adfcd36650ef4c2aba547d6ea92d74ca~tplv-k3u1fbpfcp-watermark.image?) ### 动态导入在项目开发中，一般以单页面应用程序为主很少需要配置多个入口文件，抽离公共代码也很少使用，经常使用的主要是动态导入（路由懒加载）。 **CommonJS模块化** 规范支持动态导入的，但是 **ES6模块化** 规范是静态导入。在 **Webpack5** 中可以通过 **import(module)** 实现模块动态导入 #### import(module) **import(module)** 可以动态导入模块，它会返回一个 **Promise** 实例可以通过 **.then** 获取模块实例 - 修改src/main.js ```js let a = 1 if (a === 1) { console.log("a", a); import("jquery").then(({ default: $ }) => { $("

").html("这是动态导入的main.js").appendTo("body") }) } ``` - `npm run dev` 查看结果 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/961d2812129d4755877200cc28f22ff7~tplv-k3u1fbpfcp-watermark.image?) #### 静态导入存在的问题使用静态导入打包出的模块，在页面加载时就会全部加载进来非常影响体验 - 清空 **index.html** ```js Document ``` - 修改 **main.js** ```js import $ from 'jquery' // 点击按钮后使用JQ创建新节点并插入到页面中 document.getElementById("btn").onclick = function () { $("

").html("main.js").appendTo("body") } ``` - `npm run server`运行服务可以看到页面加载时JQ就已经加载进来了此时我们并未使用它 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b7bc63f6f8541d5959f58c51ad82f7d~tplv-k3u1fbpfcp-watermark.image?) #### 动态导入的好处动态导入可以做到模块的按需加载（懒加载），只有当真正还是用这个模块时再去加载它 - 应用改为单入口 ```js // webpack.base.js module.exports = { entry: "./src/main.js", // entry: { // main: "./src/main.js", // other: "./src/other.js" // } } ``` - 修改 **src/main.js** ```js document.getElementById("btn").onclick = function () { import("jquery").then(({ default: $ }) => { $("

").html("这是动态导入的main.js").appendTo("body") }) } ``` - `npm run dev` 运行服务点击按钮之后才会加载JQ模块 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/63e7c3f4c5fe475d83117d13e4abcbb2~tplv-k3u1fbpfcp-watermark.image?) # 代码拆分代码拆分通过 **splitChunksPlugins** 插件实现的 **splitChunksPlugins**会根据以下默认配置自动拆分代码： - 公共模块或者来自 **node_modules** 下的组件模块 - 打包的代码块大小超过30kb（最小压缩之前） - 按需加载代码块时，同时发送请求数量不应该超过5 - 页面初始化,同时发送的请求数量不应该超过3 **注意**： **官网Demo示例为Mac，路径为正斜杠 window要用反斜杠取模块name**!!!! ```js optimization: { splitChunks: { // 对异步加载的模块进行拆分可选值：all（静态动态模块都拆分） | initial（对静态模块导入拆分）; chunks: 'async', // 允许新拆出 chunk 的最小体积 20KB minSize: 20000, // webpack5新属性，防止0尺寸的chunk minRemainingSize: 0, // 模块最少引用一次才会拆分 minChunks: 1, // 异步加载的请求数量最大不能超过30，超过5的部分不拆分 maxAsyncRequests: 30, // 页面初始同时发送的请求数量最大不能超过30，超过30的部分不拆分 maxInitialRequests: 30, // 当模块大小大于50KB强行进行拆分忽略其他任何限制 enforceSizeThreshold: 50000, // 缓存组配置，上面的配置读取完成后进行模块拆分，如果多个模块拆分导一个文件上就需要缓存，所以命名为缓存组 cacheGroups: { // 自定义名为 commons的缓存组 commons: { // 匹配规则 test: /[\\/]node_modules[\\/]/, // 权重，权重越大优先级越高当模块匹配到多个缓存组中，最终根据权重决定要打包进哪个缓存组 priority: -10, reuseExistingChunk: true, // 缓存组生成文件名动态自定义 name(module, chunks, cacheGroupKey) { console.log("模块路径", module.identifier()); const moduleFileName = module .identifier() // window: E:\study\basic\node_modules\jquery\dist\jquery.js .split("\\") // mac: E:/study/basic/node_modules/jquery/dist/jquery.js // .split("/") .reduceRight((item) => item); const allChunksNames = chunks.map((item) => item.name).join('~'); // 缓存组名-[模块的依赖模块]-模块名 return `${cacheGroupKey}-${allChunksNames}-${moduleFileName}`; }, // 缓存组生成文件名写死自定义 filename: "vendors.js" }, // 默认缓存组 default: { // 模块至少引用两次才会进行拆分 minChunks: 2, priority: -20, // 是否复用chunk,例如主入口有a、b两个模块，但是b模块中引用了a模块这个打包模块时可能会出现重复打包a模块 reuseExistingChunk可以复用重复的chunk reuseExistingChunk: true, } }, }, }, }; ``` # 提升构建性能打包项目时，除了对打包文件的优化，还可以提升构建性能减少构建时间。 ## 忽略解析模块（noParse）一些第三方模块，例如 **lodash**、**jquery** 时，可以明确知道他们并没有依赖其他模块，所以也没有必要让webpack再去解析他们模块依赖关系浪费构建性能。可以通过**module.noParse** 来配置不需要解析依赖关系的模块 - **src/main.js** 中使用 **jquery** ```js document.getElementById("btn").onclick = function () { import("jquery").then(({ default: $ }) => { $("

").html("这是动态导入的main.js").appendTo("body") }) } ``` - 未配置 **noParse** 直接打包 `npm run build`，构建速度约为3664毫秒 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/caa33d6e3599444ea336c7ffa31d401f~tplv-k3u1fbpfcp-watermark.image?) - 配置 **noParse** ```js // config/webpack.base.js module.exports = { module: { // 不对jquery模块进行解析 noParse: /jquery/， // 不对多个模块进行解析 // noParse: /jquery|lodash/ } } ``` - **npm run build** 重新构建项目配置noParse后，构建时间减少了300多毫秒!! 在项目中配置多个noParse的模块项目会更显著 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aadc74c31e124c3096da5504d67b110b~tplv-k3u1fbpfcp-watermark.image?) ## 忽略打包模块（ignorePlugin）在引入一些第三方模块时，例如 **moment** ,每部会做i18n的国际化处理，会包含很多语言包。但是语言包在打包时会占用空间，如果项目只需要少数语言或某种语言，可以忽略其他语言包，这样构建项目的效率更高，打包生成的文件体积更小 **ignorePlugin** 可以忽略模块内部依赖的其他模块，然后我们再根据需求按需导入需要的模块 - 首先找到 **moment** 依赖的语言包 - 使用 **ignorePlugin** 忽略其依赖 - 需要使用某些依赖时自行手动引入 ### moment **moment** 是国际化时间处理的工具库 - 安装 **moment** `npm i moment` - 使用 **moment** ```js // src/main.js // 导入moment import moment from 'moment' // 使用中文语言包 moment.locale("zh-CN") // 六天前的日历时间 const time = moment().subtract(6, 'days').calendar(); console.log("time", time); ``` - `npm run build` 查看构建结果 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89cdba69cacf41e1abee5bf806138122~tplv-k3u1fbpfcp-watermark.image?) ### 使用 ignorePlugin 进行优化 - 找到 **moment** 内部引入的语言模块 - 查看语言包位置（**node_modules/moment/locale**） ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2ee0349b132241d78fc61597202d7938~tplv-k3u1fbpfcp-watermark.image?) - 在 **moment** 的入口文件搜索 **require** 关键字查看内部引入的哪些模块 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f239b3181ed46c7b9a01467ff2f2266~tplv-k3u1fbpfcp-watermark.image?) - 配置 **ignorePlugin** ```js module.exports = { plugins:[ /** * IgnorePlugin:是webpack内置插件 * IgnorePlugin(options) * - options:配置对象 * - resourceRegExp:要被忽略的模块，这里要屏蔽moment中的locale语言包模块 * - contextRegExp:使用被忽略的模块的上下文,你在哪个模块中使用了要被忽略的模块。这里语言包模块的上下文是moment模块 */ new Webpack.IgnorePlugin({ // 忽略 "./locale" 模块 resourceRegExp: /\.\/locale/, // 在moment中忽略 "./locale" 模块 contextRegExp: /moment/ }) ] } ``` - 按需导入语言包模块前面通过 **ignorePlugin** 已经忽略掉 **moment.js** 引入的所有语言包模块。我们需要在业务代码中按需引入语言包模块 ```js import moment from 'moment' // 手动引入中文语言包 import 'moment/locale/zh-cn' moment.locale("zh-CN") const time = moment().subtract(6, 'days').calendar(); console.log("time", time); ``` - `npm run build` 重新打包对比之前打包之后文件大小之前由于语言包过大 codesplit将其单独分为一个大小为228.kb的bundle。通过 **ignorePlugin** 处理后这个228.kb的bundle被优化掉了,同时main.js也有所减小。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a751aed732124468a91d8d3deb1bc0e9~tplv-k3u1fbpfcp-watermark.image?) ### 谨慎使用 noParse **noParse** 会忽略对模块内部依赖关系的解析，盲目使用 **noParse** 可能会导致模块内部依赖丢失的问题例如使用 **ignornPlugin** 忽略 **moment** 语言包模块依赖导入，按需导入要用的语言包后，如果将 **moment** 配置到 **noParse** 会出现bug。所以在配置 **noParse** 后一定要重新构建项目查看项目是否正常运行。在对项目调优时，我们应该在每步优化后重新构建项目，查看项目是否正常运行。不要全部优化操作后再构建项目，以免出现问题后无法定位在哪步调优出现的。 ## 生成动态链接库（DLLPlugin）在引入一些第三方模块，例如 **vue** ，**react** ， **angular** 等框架，这些框架模块的的代码一般不会发生变化，但是每次打包都会重新解析这些模块非常浪费性能。可以通过 **DLLPlugin** 将这些模块单独打包成动态链接库，只构建一次。后面只构建业务层代码复用动态链接库，可以大大提高构建速度。这个功能涉及两个插件 **DllPlugin** 使用一个单独的webpack配置文件配置DLLPlugin插件打包创建dll文件，并且还创建一个manifast.json（这个文件就是dll文件使用说明书）。DllReferenceolugin使用该json文件来做依赖映射 - context（可选）：manifast文件中请求的上下文，默认为改webpack文件上下文 - name：公开的dll函数名称，要与output.library保持一致即可 - path：mainfast.json生成的路径 **DllReferencePlugin** 在主webpack配置文件中配置该插件，这个插件通过引用之前构建好的dll文件，自动引入之前被打包好的模块 - context：mainfast文件中请求的上下文 - mainfast：DllPlugin插件生成的mainfest.json - content（可选）：请求的映射模块id（默认为mainfest.content） - name（可选）：dll暴露的名称 - scope（可选）：前缀用于访问dll的内容 - sourceType（可选）：dll是如何暴露（libraryTarget）这里结合 **Vue**、**React** 介绍下这两个插件该如何配置 ### Vue生成动态链接库 - 安装 `npm i vue vue-router -S` - 修改 **index.html** ```js

home页面

about页面

``` - 初始化Vue ```js // src/main.js // runtime-only版 vue.js:runtime-only版无法解析template 必须配置相关loader // import Vue from 'vue' // runtime-compiler版 vue.js import Vue from 'vue/dist/vue.js' new Vue({ el: "#app", data() { return { msg: "1111" } } }) ``` - 配置路由 ```js // src/main.js import VueRouter from "vue-router" Vue.use(VueRouter) // 新建 Home、About组件 const Home = { template: "

这是home

" } const About = { template: "

这是about

" } // 新建路由匹配规则 const routes = [ { path: "/", component: Home }, { path: "/about", component: About } ] // 新建路由实例 const router = new VueRouter({ routes }) new Vue({ el: "#app", // 挂载路由 router, data() { return { msg: "1111" } } }) ``` - 新建 **config/webpack.vue.js** **config/webpack.vue.js** 是专门将Vue全家桶打包成Dll文件 - 配置入口，将多个要做成dll库的模块都引入进来 - 配置出口，一定要设置library属性，将打包好的结果暴露到全局 - 配置plugin，设置打包后的dll文件名和manifest文件所在位置 ```js // config/webpack.vue.js const path = require("path") const webpack = require("webpack") module.exports = { entry: { // vue库相关入口 vue: [ // 如果不写全默认采用的vue.esm.js 'vue/dist/vue.js', 'vue-router' ] }, output: { path: path.resolve(__dirname, "../dist"), // 使用占位符语法 filename: "[name]_dll.js" }, plugins: [ // 通过DllPlugin 插件将模块打包成 dll文件 new webpack.DllPlugin({ // 打包后dll文件对外暴露的变量名 name: "[name]_dll", // dll文件使用说明书 path: path.resolve(__dirname, "../dist/manifest.json") }) ] } ``` - 新增打包dll文件的脚本 ```js "scripts": { // 打包dll文件 "build:vue": "npx webpack --config ./config/webpack.vue.js" } ``` - 执行 `npm run build:vue` 得到dll文件，这Vue全家桶再也不用打包了 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/23349e9f10004b7fa9ae4c9fb28221c7~tplv-k3u1fbpfcp-watermark.image?) - 项目中使用动态链接库前面生成了dll文件，需要在webpack配置文件中注册使用dll文件 ```js // config/webpack.base.js module.exports = { plugins: [ // 使用dll文件时，不能使用CleanWebpackPlugin插件它会清空dll等所有dist目录 // new CleanWebpackPlugin(), // 使用dll依赖 new Webpack.DllReferencePlugin({ // 指定dll使用说明书路径 manifest: path.resolve(__dirname, "../dist/manifest.json") }) ] } ``` = html引入dll模块依赖前面我们在业务代码中注册并使用dll模块，webpack打包时默认不会加载dll模块，我们需要借助 **add-asset-html-webpack-plugin** 插件解决这个问题 - 安装 `npm i add-asset-html-webpack-plugin -D` - 配置插件 ```js // webpack.base.js const AddAssetHtmlWebpackPlugin = require("add-asset-html-webpack-plugin") module.exports = { plugins: [ // 在打包后的html中插入资源，这个插件一定要配置在 HtmlPlugin插件之后 new AddAssetHtmlWebpackPlugin({ // 加载dll 资源 filepath: path.resolve(__dirname, "../dist/vue_dll.js"), // 必须加这个字段否则打包后dll引用路径前会莫名加auto publicPath: './', }) ] } ``` - `npm run build` 重新打包下 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8dc9a3bdaa24d8f8358190073e2a0c7~tplv-k3u1fbpfcp-watermark.image?) 对比一下不使用dll的时间，由 3701ms 涨到 4731ms ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b2f122ceba3435c8722456898ee9a6c~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc201fbd27bd4e208d94ddeec189b5b2~tplv-k3u1fbpfcp-watermark.image?) ### React生成动态链接库 - 安装 `npm i react react-dom -S` - 修改 **index.html** ```js

``` - 新建 **main.react.js ** ```js import React from 'react' import ReactDOM from 'react-dom' // 新建h1 虚拟DOM const node = React.createElement("h1", null, "学习好累呀，我想睡大觉！") // 通过ReactDOM 将虚拟DOM渲染到 app节点中 ReactDOM.render(node, document.getElementById("app")) ``` - 修改入口文件、修改dll库引入路径 ```js // config/webpack.base.js module.exports = { entry: { // 使用Vue相关库 // main: "./src/main.js", // 使用React相关库 main: "./src/main.react.js", }, plugins: [ // // 使用dll依赖 new Webpack.DllReferencePlugin({ // 指定dll使用说明书路径 manifest: path.resolve(__dirname, "../dist/manifest.json") }), // 在打包后的html中插入资源，这个插件一定要配置在 HtmlPlugin插件之后 new AddAssetHtmlWebpackPlugin({ // filepath: path.resolve(__dirname, "../dist/vue_dll.js"), // 加载react dll资源 filepath: path.resolve(__dirname, "../dist/react_dll.js"), // 必须加这个字段否则打包后dll引用路径前会莫名加auto publicPath: './', }) ] } ``` - 新建打包 **react** 动态链接库的 webpack 配置文件 **(webpackconfig/webpack.react.js)** ```js const path = require("path") const webpack = require("webpack") module.exports = { mode: "production", entry: { // react库相关入口 react: [ 'react', 'react-dom' ] }, output: { path: path.resolve(__dirname, "../dist"), // 使用占位符语法 filename: "[name]_dll.js", // dll库暴露出的全局变量供业务模块使用 library: "[name]_dll" }, plugins: [ // 通过DllPlugin 插件将模块打包成 dll文件 new webpack.DllPlugin({ // 打包后dll文件对外暴露的变量名 name: "[name]_dll", // dll文件使用说明书 path: path.resolve(__dirname, "../dist/manifest.json") }) ] } ``` - 配置打包react dll库脚本 `"build:react": "npx webpack --config ./config/webpack.react.js"` - 手动删除dist,执行 `npm run build:react` 打包react dll库 - 执行 `npm run build`,构建整个项目 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b8de1546b15494d811dcb5e02816d09~tplv-k3u1fbpfcp-watermark.image?) ## 多进程打包 webpack基于node环境工作，使用单进程模式打包。在打包众多资源的情况下，可能会出现效率低下的问题，可以通过 **thread-loader** 实现多进程打包。 **注意：进程的开启（开启大概600ms）、进程间的通讯都有时间成本，不建议小项目使用多进程打包** - 安装 `npm i thread-loader -D` - 配置loader ```js // webpack.base.js module: { rules:[ { test: /\.js$/i, exclude: /(node_modules|bower_components)/, use: [ // 使用 thread-loader "thread-loader", // { // loader: "thread-loader", // options: { // // 开启进程的数量 // workers: 2 // } // }, { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ["@babel/plugin-transform-runtime"] } } ] }, ] } ``` # 浏览器缓存在浏览器访问页面时，会将资源缓存到硬盘或内存中，这样再次访问html中的外部资源会从本地获取，这样避免了重复从服务器请求资源极大地提高了效率。此时会出现一个问题，就是项目开发新版本，更新业务代码上线时。由于浏览器缓存的缘故，浏览器并不会访问最新的js文件等资源，这会导致页面无法更新。我们最好将项目代码作区分，将第三方模块和业务代码单独打包。通过构建出口 **placeholder** 语法,为构建输出的js文件名增加随机hash字符串。这样每次打包构建的文件名，每次访问页面也是从最新的文件访问资源。 **placeholder语法变量** - name：使用元文件名 - hash：每次webpack打包随机生成哈希值 - chunkhash：不同的chunk的hash值不同，同一次打包可能生成不同的chunk - contenthash：不同内容的hash值不同，同一个chunk中可能有不同的内容 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fdb47cb089cd49d58ee8a69f3ad24de7~tplv-k3u1fbpfcp-watermark.image?) # 打包分析项目构建完成后，我们可以借助一下工具对打包完成的bundle进行分析。 ## 通过打包结果信息json文件进行分析 - 配置script脚本指令，生成打包信息的json文件使用 `--profile --json`指令已json形式将打包信息输出到某个json文件中 `"build:analyse": "npx webpack --profile --json > stats.json --config ./config/webpack.prod.js"` - 执行 `npm run build:analyse` 构建项目并生成构建信息文件 - 打开webpack官方分析工具上传 stats.json 链接地址：https://webpack.github.io/analyse/ ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7dc640f8bf749dcb8e0e6fe2b7af5df~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd3288d813704b378be8fb22af2918d7~tplv-k3u1fbpfcp-watermark.image?) ## 配置分析插件进行打包分析 - 安装 `npm i webpack-bundle-analyzer -D` - 配置插件 **(config/webpack.prod.js)** ```js // 导入bundle分析插件 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer") const prodConfig = merge(baseConfig, { mode: "production", plugins: [ // 初始化插件 new BundleAnalyzerPlugin() ]}) ``` - `npm run build`重新构建后，会自动运行一个分析服务 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a22d9e72888b451a907d5d072bc5ee0a~tplv-k3u1fbpfcp-watermark.image?)