Vue项目打包优化

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

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中 添加所需的第三方库的链接













(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 [email protected]

(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 引入的方式。

你可能感兴趣的:(vue,前端,vue.js,javascript,前端)