减小vue、element-ui打包后的文件大小

原文在这里

具体思路是通过将element-ui、vue等常用的包使用外链的方式部署
操作如下：
1、修改index.html页面，再head中引入cdn。

引入cdn.png

2.修改webpack.base.conf.js文件中的module.exports 添加externals配置:

  externals: {
    vue: 'Vue',
    element: 'ElementUI',
  },

注意.png

3.删除main.js中的相应import from。因为如果不删除，打包的时候还会把这两个文件打进去

打包的时候删掉引入.png

更新Vue-cli 3.0 （2019年3月30日）：

在Vue-cli 3.0中使用cdn加速的方法：

在根目录中新建vue.config.js:

'use strict'

const CompressionPlugin = require("compression-webpack-plugin")
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
    outputDir: "../dist",
    configureWebpack: config => {
        // 开启Gzip压缩
        if (isProduction) {
            config.plugins.push(new CompressionPlugin({
                algorithm:'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }))
            // 排除掉要使用cdn的包：
            config.externals = {
                vue: "Vue",
                axios: 'axios',
                // 这个地方如果和mian.js一起改为elementUI这种小写的，就会报错找不到，原因未知
                "element-ui": "ELEMENT"
            }
        }
    },
    // 开发服务器代理转发：
    devServer: {
        proxy: {
            '/api':{
                target:'http://localhost:3001/api',
                changeOrigin: true,
                pathRewrite:{
                  '/api':''
                }
            }
        }
    },

    assetsDir: 'static',

    indexPath: 'index.ejs',
}

index.html中的内容：