Vue打包优化 优化JS过大 西门

Vue打包优化 优化JS过大

1、安装查看资源树插件

npm i webpack-bundle-analyzer

2、设置懒路由

将每个页面都如图导入

三、配置打包环境与配置CDN链接

1、配置打包环境

const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
    css: [],
    js: ['https://unpkg.com/vue/dist/vue.js',
        'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
        'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
        'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
        'https://lib.baomitu.com/echarts/5.1.0/echarts.min.js',
        'https://unpkg.com/element-ui/lib/index.js'
    ]
}

chainWebpack: (config) => {
        /* 添加分析工具 */
        if (isProduction) {
            config.plugin('html')
            .tap(args => {
                args[0].cdn = cdn;
                return args;
            });
          config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
            .end()
          config.plugins.delete('prefetch')
        } else {
        }
      },
      configureWebpack: config => {
        if (isProduction) {
            // 用cdn方式引入
            config.externals = {
                'vue': 'Vue',
                'vuex': 'Vuex',
                'vue-router': 'VueRouter',
                'axios': 'axios',
                "echarts": "echarts"
            }
        }
    },

注意！

cdn链接放的顺序很重要！很重要！很重要！

2、去到public下的index.html添加以下语句引入js与css

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
  <% } %>

<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>

3、去main.js里注释掉elementui

特别注意axios的引入姿势，否则会报错

执行打包命令查看结果

npm run build

打包前

打包后

效果还是很明显的