文章详情 - 宏推科技

打包优化

打包优化，可以说是前端工程化必不可少一个必备技能，接下来就以为自己博客的项目，进行打包优化，请各位看官多多提意见，一起进步。

由于用的是nuxt，刚好官方本身就支持打包分析，所以首先在nuxt.config.js开启打包分析，就可以更直观的看出各个js都大小


js
 代码解读
复制代码
// 开启打包分析
analyze: true

//然后在控制条运行yarn build --analyze

分析

New Image

从图中看出，vendos.app.js非常的大，足足占了7成，所以可以从下面几个方面进行优化

ant-design的图标全部加载了进来
v-md-editor过大，单独提取
业务代码中的公共业务模块提取打包到一个模块

开始优化

找到问题所在，下面就根据上面问题一一解决

利用webpack4的splitChunks来按照自己制定的配置来拆分，所有配置请看文档链接

ant-design图标按需加载

在src目录下新建一个js文件，导入自己需要的图标


js
 代码解读
复制代码
// export what you need
export {
  default as CheckCircleOutline
} from ''@ant-design/icons/lib/outline/CheckCircleOutline''

export {
  default as CloseCircleOutline
} from ''@ant-design/icons/lib/outline/CloseCircleOutline''

然后再nuxt.config.js下配置alias


js
 代码解读
复制代码
alias: {
    images: resolve(__dirname, ''./assets/images''),
    css: resolve(__dirname, ''./assets/css''),
    ''@ant-design/icons/lib/dist$'': resolve(__dirname, ''./src/icons.js'')
  },

v-md-editor抽离

在nuxt中，已有对应的配置接口


js
 代码解读
复制代码
optimization: { // 拆分大文件
      splitChunks: {
        cacheGroups: {
          mdEditor: {
            name: ''chunk-v-md-editor'',
            priority: 20,
            test: /[\\/]node_modules[\\/]@kangc/
          },
          ...
        }
      }
    },

公共业务模块提取


js
 代码解读
复制代码
optimization: { // 拆分大文件
      splitChunks: {
        cacheGroups: {
          default: {
            name: ''chunk-commons'',
            chunks: ''initial'',
            minChunks: 3, // 模块被引用3次以上的才抽离
            priority: -20
          }
          ...
        }
      }
    },