Vue项目优化：CDN引入与Gzip压缩-优快云博客

Vue 项目打包以后 vendor.js 体积太大，影响首次加载速度_随遇而安、1314的博客-优快云博客
Vue CLI 2&3 下的项目优化实践 —— CDN + Gzip + Prerender_小小木锤的博客-优快云博客

1、构建后文件说明：

app.css：压缩合并后的样式文件
app.js：主要包含项目中的App.vue、main.js、router、store等业务代码
vendor.js：主要包含项目依赖的诸如vuex，axios等第三方库的源码
数字.js：以0、1、2、3等数字开头的js文件，这些文件是各个路由切分出的代码块
mainfest.js：mainfest的英文有清单、名单的意思，该文件包含了加载和处理路由模块的逻辑

2、CDN资源

bootstrap CDN：https://www.bootcdn.cn
Staticfile CDN：https://www.staticfile.org
jsDelivr CDN：https://www.jsdelivr.com
75 CDN：https://cdn.baomitu.com
UNPKG：https://unpkg.com
cdnjs：https://cdnjs.com

3、步骤

（1）在index.html中添加所需的第三方库的链接

<!-- 引入Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
<!-- 引入vuex.js -->
<script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.staticfile.org/element-ui/2.4.3/index.js"></script>
<!-- 引入样式 -->
<link href="https://cdn.staticfile.org/element-ui/2.4.3/theme-chalk/index.css" rel="stylesheet">
<!-- 引入echarts -->
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>

（2）在webpack.base.conf 中添加 externals，告诉webpack这些第三方库不需要打包

 // 引入外部库, 无需webpack打包处理
  externals: {
    vue:'Vue',
    mockjs: 'Mock',
    echarts: 'echarts',
    ueditor: 'UE',
    axios:'axios',
    moment:'moment',
    'element-ui':'ElementUI'
  }

（3）去掉main.js中cdn所引入对应的import

（4）开启gzip压缩

npm install --save-dev compression-webpack-plugin@1.1.12

（5）修改build文件夹中webpack.prod.conf.js文件,将asset改为filename；

if (config.build.productionGzip) {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')

    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
            // asset: '[path].gz[query]',
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp(
                '\\.(' +
                config.build.productionGzipExtensions.join('|') +
                ')$'
            ),
            threshold: 10240,
            minRatio: 0.8
        })
    )
}

（6）设置config/index.js中productionGzip: true；

build: {
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        productionSourceMap: false,
        devtool: '#source-map',
        productionGzip: true,// 这里开启Gzip
        productionGzipExtensions: ['js', 'css'],
        bundleAnalyzerReport: process.env.npm_config_report
    }

注意事项：
1、在第一步引入资源时注意 vue.js 必须在 vue-router、vuex、element-ui 之前引入。
2、在第二步修改配置时注意 “element-ui”: “ELEMENT” 是固定写法不能更改。
3、如果 element-ui 采用 cdn 引入的方式，vue 不采用 cdn 引入的方式，这样打包以后打开 dist 下的 index.html 时页面空白报错，必须 vue 和 element-ui 都采用 cdn 引入的方式。