性能优化——提高webpack打包速度

1. 将第三方包使用外链的方式加载

步骤1: 把需要使用外链的包定义为一个对象

const link = {
  externals: {
    "monaco-editor": "monaco",
    "monaco-editor/esm/vs/editor/editor.api": "monaco", //把react-monaco,
    'clsx': 'clsx',
    'axios': 'axios',
    "react": "React",
    "react-dom": "ReactDOM",
    "react-dom/server": "ReactDOMServer",
    "react-router-dom": "ReactRouterDOM",
    'vue': "Vue",
    'vue-router': "VueRouter",
    'vuex': "Vuex",
    'jquery': "jQuery",
    'jszip': 'JSZip',
    'element-ui': 'ELEMENT',
    'qiankun':'qiankun'
  },
  css: [
  ],
  js: [
    '/vendor.js'
  ]
}

注: vendor.js用于存放需要外链的js , 放在了public目录下, 会引入到index.html中(看第4步)

2. 在configureWebpack中配置

 3. 在chainWebpack中在html模板中自定义一个link属性存放数据

 4. 加载link对象上的数据

2. 将体积大的库过滤成比较小的库

场景: 如下图, moment这个库体积较大, 实际只用了里面单独的几个api, 比较大材小用 (当然, 我们可以选择体积较小的dayjs库, 也可以自己封装格式化时间的api)

 如果你坚持使用了moment库, 那如何减少它的体积呢?

解决:  在vue.config.js中使用webpack中的ContextReplacementPlugin,来筛选新上下文的资源

 解析ContextReplacementPlugin:

ContextReplacementPlugin: 允许你覆盖查找规则

用法: 

new webpack.ContextReplacementPlugin(
  resourceRegExp: RegExp,
  newContentResource?: string,
  newContentRecursive?: boolean,
  newContentRegExp?: RegExp
)

如果资源（或目录）符合 resourceRegExp 正则表达式，插件会替换默认资源为 newContentResource，布尔值 newContentRecursive 表明是否使用递归查找，newContextRegExp 用于筛选新上下文里的资源。如果 newContentResource 为相对路径，会相对于前一匹配资源路径去解析。

就以限制moment中的模块为例子, 限定查找 moment/locale 上下文里符合 /zh\-mo/ 表达式的文件，因此也只会打包这几种本地化内容

new (require("webpack").ContextReplacementPlugin)(
          /moment[/\\]locale$/,
          /zh\-mo/
        ),

更多详情请参考: https://cloud.tencent.com/developer/section/1477555