vue项目shou优化记录

Posted 2021-01-18 shenmissing

1.起因

??项目打包的时候发现部分文件过大：vender.js有400K，app.css高达1.6M。看着这个数值，瞬间凌乱。

2.优化

??2.1 优化vender.js
????是因项目的依赖 vue、vue-router、vuex、axios 造成的，可使用cdn,注意更换对应版本号

<script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

????在 build/webpack.base.conf.js 中添加如下代码,使其不打包进文件

module.exports = {
    //...
    externals: {
      ‘vue‘: ‘Vue‘,
      ‘vue-router‘: ‘VueRouter‘,
      ‘vuex‘:‘Vuex‘
  },
    //...
}

????去掉相关引用代码

// import Vue from ‘vue‘
// import Router from ‘vue-router‘
// import Vuex from ‘vuex‘

??2.2 优化app.css
????是因项目css中使用的图片全部转成了base64写入了css中，导致app.css体积过大，首屏加载过慢，在 build/webpack.base.conf.js 中设置图片下的url-loader的大小限制

module: {
    rules: [
        //...
        { 
            {
                test: /.(png|jpe?g|gif|svg)(?.*)?$/,
                loader: ‘url-loader‘,
                options: {
                    name: utils.assetsPath(‘img/[name].[ext]‘),
                    limit:50  //<--添加此行，单位为 b，表示将图片大小 <=50b 的图片转成base64格式
                }
            },
        }
        //...
    ]}
    
// ---------------------打包后可能会出现css中的图片路径不对的情况，修改如下代码：
// build/utils.js 中找到 vue-style-loader
if (options.extract) {
    return ExtractTextPlugin.extract({
        use: loaders,
        fallback: ‘vue-style-loader‘,
        publicPath:‘../../‘ // <--添加此行代码
    })
} else {
    return [‘vue-style-loader‘].concat(loaders)
}

??2.3 启用Gzip压缩，一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip

//config/index.js 中招到 productionGzip 设置为true
build: {
    //...
    productionGzip：true,
    productionGzipExtensions: [‘js‘, ‘css‘],
}
//build/webpack.prod.conf.js 中添加以下代码
if (config.build.productionGzip) {
    const CompressionWebpackPlugin = require(‘compression-webpack-plugin‘)
    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
        asset: ‘[path].gz[query]‘,
        algorithm: ‘gzip‘,
        test: new RegExp(
            ‘\.(‘ +
            config.build.productionGzipExtensions.join(‘|‘) +
            ‘)$‘
        ),
        threshold: 10240,
        // deleteOriginalAssets:true, //删除源文件，不建议
        minRatio: 0.8
    })
  )
}