Vue-cli4.x的一些打包优化

资源preload

chainWebpack(config) {
    // 提高首屏渲染的速度
    config.plugin("preload").tap(() => [
      {
        rel: "preload",
        // 忽略 runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial"
      }
    ])
    // 多页面时会导致很多重复的无用请求
    config.plugins.delete("prefetch")
  }

统一处理svg图标

npm install svg-sprite-loader --save-dev

config.module.rule("svg").exclude.add(resolve("src/icons")).end()
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end()
      // .before("svg-sprite-loader")
    // .use("svgo-loader")
    // .loader("svgo-loader")
    // .options({
    //   plugins: [
    //     {
    //       name: "removeAttrs",
    //       params: {
    //         attrs: "(fill|stroke)"
    //       }
    //     }
    //   ]
    // })
    // .end()

也可以对svg的fill属性进行去除，主要是看公司ui和前端开发之间的规定，或者有些svg多色彩的不能去除fill。

去除fill属性需要采用 svgo以及 svgo-loader 插件，

代码分割

config.optimization.splitChunks({
     chunks: "all",
     cacheGroups: {
       libs: {
         name: "chunk-libs",
         test: /[\\/]node_modules[\\/]/,
         priority: 10,
         chunks: "initial" // only package third parties that are initially dependent
       },
       elementUI: {
         name: "chunk-elementUI", // split elementUI into a single package
         priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
         test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
       },
       commons: {
         name: "chunk-commons",
         test: resolve("src/components"), // can customize your rules
         minChunks: 3, //  minimum common number
         priority: 5,
         reuseExistingChunk: true
       }
     }
   })

生产环境去掉 console,debugger, 和注释

config.when(process.env.NODE_ENV === "production", config => {
      config.optimization.minimizer("terser").tap(args => {
        const compress = args[0].terserOptions.compress
        compress.drop_console = true
        compress.drop_debugger = true
        compress.pure_funcs = [
          "__f__" // App 平台 vue 移除日志代码
          // 'console.debug' // 可移除指定的 console 方法
        ]
        args[0].terserOptions.output = {
          comments: false
        }
        return args
      })
    })

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦