vue项目中webpack打包优化

主要是cdn配置、打包分析插件安装、loader优化

cdn配置时需注意有的js文件是node用的，有的是cdn用的

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

module.exports = {
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    config.plugin("webpack-bundle-analyzer").use(BundleAnalyzerPlugin).end();
    config.plugin("speed-measure-webpack-plugin").use(SpeedMeasurePlugin).end();
    // vue.config.js
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'title test'
        return args
      });
      config.module.rule('js').use('babel-loader')
        .loader('babel-loader')
          .options({
            cacheDirectory: true
          })
    // config.module.rule('js').use('babel-loader')
    //     .tap(options => {
    //       options.cacheDirectory = true
    //       return options
    //     });

    // 忽略的打包文件
    config.externals({
      vue: "Vue",
      "vue-router": "VueRouter",
      vuex: "Vuex",
      axios: "axios",
      "element-ui": "ELEMENT",
      "wangeditor": "wangEditor",
      jspdf: "jspdf",
      html2canvas: "html2canvas"
    });
    config.plugin("provide").use(webpack.ProvidePlugin, [
      {
        $: "jquery",
        jquery: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
      },
    ]);
    const entry = config.entry("app");
    entry.add("babel-polyfill").end();
    entry.add("classlist-polyfill").end();
  },
  // 配置转发代理
  devServer: {
    proxy: {
      "/api": {
        target: api_url,
        ws: true,
        pathRewrite: {
          "^/api": "",
        },
      },
      "/mock": {
        //调试时调用eolinker的接口模拟数据
        target: mock_url,
        ws: true,
        pathRewrite: {
          "^/mock": "",
        },
      },
      // '/auth': {
      //   target: url,
      //   ws: true,
      //   pathRewrite: {
      //     '^/auth': '/auth'
      //   }
      // },
      // '/admin': {
      //   target: url,
      //   ws: true,
      //   pathRewrite: {
      //     '^/admin': '/admin'
      //   }
      // },
      // '/code': {
      //   target: url,
      //   ws: true,
      //   pathRewrite: {
      //     '^/code': '/code'
      //   }
      // },
      // '/gen': {
      //   target: url,
      //   ws: true,
      //   pathRewrite: {
      //     '^/gen': '/gen'
      //   }
      // },
      // '/daemon': {
      //   target: url,
      //   ws: true,
      //   pathRewrite: {
      //     '^/daemon': '/daemon'
      //   }
      // },
      // '/tx': {
      //   target: url,
      //   ws: true,
      //   pathRewrite: {
      //     '^/tx': '/tx'
      //   }
      // },
      // '/mall': {
      //   target: url,
      //   ws: true,
      //   pathRewrite: {
      //     '^/mall': '/mall'
      //   }
      // }
    },
  },
};

cdn

    <script src="<%= BASE_URL %>cdn/element-ui/2.12.0/index.js" charset="utf-8"></script>
    <!-- <script src="<%= BASE_URL %>cdn/jspdf/jspdf.umd.min.js" charset="utf-8"></script> -->
    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
    <script src="<%= BASE_URL %>cdn/html2canvas/html2canvas.min.js" charset="utf-8"></script>

    <script src="<%= BASE_URL %>cdn/wangeditor/wangEditor.min.js" charset="utf-8"></script>

package.json中：

--report是启用文件打包分析，打包完成后会自动打开一个网页，展示各模块的size

  "scripts": {
    "pre": "yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
    "serve": "vue-cli-service serve --report",
    "build": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
  },

资料参考：

1：https://www.cnblogs.com/zhenfeng25/p/16642864.html

2：vue-cli多方面配置优化让你项目更强更快_vue optimization_姑老爷呀的博客-CSDN博客

3：Webpack优化篇_speed-measure-webpack-plugin_良_123的博客-CSDN博客

4：如何优化你的 vue-cli 项目？ - 掘金

5：前端工程化精讲第十三课 缓存优化：那些基于缓存的优化方案_cache-loader_办公模板库 素材蛙的博客-CSDN博客

6：[20220215]学习vue-element-admin中的webpack优化 - 知乎

7：Webpack 大法之 Code Splitting - 知乎

8： 通过chainWebpack自定义打包入口_chainwebpack externals_草莓冻冻的博客-CSDN博客

 9：Vue项目性能优化篇_别把代码当饭吃的博客-CSDN博客

10：我是如何把vue项目启动时间从70s优化到7秒的_vue项目启动慢_CRMEB的博客-CSDN博客

11：webpack-chain_chainwebpack_飞翔的熊blabla的博客-CSDN博客

12：前端 - compression-webpack-plugin实践 - 个人文章 - SegmentFault 思否

13：浅谈 webpack 性能优化（内附 webpack 学习笔记） - 知乎