项目中webpack优化配置（1）

项目中webpack优化配置

一. 开发效率，体验

1. DLL（开发过程中减少构建时间和增加应用程序的性能）

使用 DllPlugin 进行分包，使用 DllReferencePlugin(索引链接) 对 manifest.json 引用，让一些基本不会改动的代码先打包成静态资源，避免反复编译浪费时间。

使用方式如下：

DLL 配置文件 comfig/dll.js

const path = require('path')
module.exports = {
  entry: [
    'vue',
    'vue-router',
    'axios',
    'element-ui',
    'echarts', // 可视化
    'clipboard', // 复制
    'crypto-js', // 加密
    'js-cookie',
    'js-md5',
  ],
  output: path.join(__dirname, '../public/vendor'),
  inject: true,
  open: false,
  cacheFilePath: path.resolve(__dirname, './public')
}

在vue.config.js，引入配置
···
const dllConfig = require(‘./config/dll’)
module.exports = {
publicPath: ‘/’,
outputDir: ‘’,
assetsDir: ‘static’,
pluginOptions: {
dll: dllConfig
},
}
···

在package.json中添加：

 "scripts": {
    "dll": "vue-cli-service dll",
  },

第一次dev时运行以下命令：

  // 打包第三方包，提高打包效率
  npm run dll

运行完之后，会在public目录下创建一个vendor文件夹，里面就是将部分引用的包，进行了预编译。
在这里插入图片描述

2. 优化resolve.modules配置和resolve.alias配置（避免输入很长的路径）

resolve.modules：告诉webpack去那个目录下查找引用的模块。
resolve.alias：使用别名，减少输入路径长度，相比resolve.modules，因为没有省略路径，会直接去别名路径查找，减少搜索时间。

优化引入模块的路径

{
  resolve: {
  alias: {
        '@': resolve('src'),
        '@bizComp': resolve('src/components-biz'),
        '@service': resolve('src/service'), // 接口
        '@utils': resolve('src/utils'),
        '@mixins': resolve('src/mixins')
      },
    modules: [
      path.resolve(__dirname, "src"),
      path.resolve(__dirname, "node_modules"),
      "node_modules",
    ],
  },
}

使用配置后的引入方式：
在这里插入图片描述

3. Tree Shaking 剔除无用死代码，缩小体积

Tree Shaking 是指在构建过程中通过静态分析，去除 JavaScript 中未被引用的死代码（未被使用的代码），以减小最终打包后文件的大小。
这个术语通常与使用 ES6 模块语法（import 和 export）的项目相关联，因为 ES6 模块系统允许静态分析，即在编译时就能确定模块的依赖关系。
Tree Shaking 的过程是这样的：

识别未被使用的代码：构建工具（例如 Webpack）会分析你的代码，识别出哪些模块、变量或函数根本没有被其他部分引用或使用。
移除未被使用的代码：一旦工具确定了哪些代码是“死”的，即未被引用的，它们就会被从最终生成的包中剔除，以减小打包后文件的体积。
Tree Shaking 有助于优化你的应用程序，因为它可以去除未被使用的代码，减少最终部署时需要加载的文件大小，提高加载速度和性能。这对于大型的项目尤其重要，因为它们往往包含很多未被使用的功能或库。
然而，Tree Shaking 并非适用于所有情况。例如，对于动态导入的模块、含有副作用但没有被标记为副作用的代码等，它可能无法完全消除所有未使用的代码。因此，在使用 Tree Shaking 时，需要注意一些限制和边界情况，并结合其他优化技术以达到最佳效果。

注：使用Tree Shaking, 包必须使用ES6模块语法，即export导出和import ... from ... 引入函数

webpack配置

  optimization: {
    /**
     * usedExports 需要与 UglifyJsPlugin 或 TerserPlugin 等压缩插件配合使用，以便在打包过程中剔除未被使用的代码。
     */
    usedExports: true, // Webpack 会分析你的代码，只导出被使用的部分，而不包含未被使用的部分。这个选项在 Tree Shaking 中发挥了关键作用。
    sideEffects: true, // 告知 webpack 去辨识 package.json 中的 副作用 标记或规则
    minimize: true,
    minimizer: [
      new TerserJSPlugin({
        cache: true,
        parallel: true, 
        sourceMap: false,
      }),
    ],
  },

package.json

 "sideEffects": [
        "./src/utils.js" // 没副作用的路径--- 会移除没有被使用的代码和副作用代码
    ], 
    "sideEffects": true, // 纯粹的，无副作用 --- 会移除没有被使用的代码和副作用代码
    "sideEffects": false, // 都有副作用 ---- 不移除副作用代码