vue性能优化之build后包体积太大（1）

基于vue-cli3.0构建项目，npm引入多个第三方包。build之后，包体积太大导致首屏过长。----毫无体验感！！！

实践的项目喜欢捣鼓可以clone下来

只总结了亲测效果明显的几种方案，解决方案大多来自于日常总结及各路大佬，如有不足，请大佬补充~

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "cnpm i && vue-cli-service build --report",
    "build:test": "cnpm i && vue-cli-service build --report mode test",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service serve"
  },

使用 --report 打出来 也会相对应要小点  （chunk-vendors.1602729112456.js 会大一点，到时拆分）

1、路由懒加载

 

在 Webpack中，我们可以使用动态 import语法来定义代码分块点 (split point)： import('./About.vue') // 返回 Promise 

如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const About = () => import('./About.vue')

在路由配置中什么都不需要改变，只需要像往常一样使用 About：

const router = new VueRouter({
  routes: [
    { path: '/about', name:'About', component: About }
  ]
})

2、nginx和webpack打包同时配置Gzip

gzip是GNU zip的缩写，顾名思义是一种压缩技术。它将浏览器请求的文件先在服务器端进行压缩，然后传递给浏览器，浏览器解压之后再进行页面的解析工作。在服务端开启Gzip支持后，我们前端需要提供资源压缩包，通过Compression-Webpack-Plugin插件build提供压缩

 

// 安装插件
cnpm i --save-dev compression-webpack-plugin
// 在vue-config.js 中加入
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production'; 
module.exports = {
 // 配置webpack
 configureWebpack: config => {
  if (isProduction) {
   // 开启gzip压缩
   config.plugins.push(new CompressionWebpackPlugin({
    algorithm: 'gzip',
    test: /\.js$|\.html$|\.json$|\.css/,
    threshold: 10240,
    minRatio: 0.8
   }))
  }
 }
}

nginx配置

 

//nginx.conf文件里
server {
    listen 80;
    server_name  localhost;
    gzip on; #开启
    gzip_proxied any;
    gzip_types
        text/css
        text/javascript
        text/xml
        text/plain
        image/x-icon
        application/javascript
        application/x-javascript
        application/json; #接受那些类型文件
}

3、优化打包chunk-vendor.js文件体积过大

当我们运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js。

 

// 在vue-config.js 中加入
module.exports = {
 // 配置webpack
 configureWebpack: config => {
  if (isProduction) {
    // 开启分离js
    config.optimization = {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 20000,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name (module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`
            }
          }
        }
      }
    };
  }
 }
}
// 至此，你会发现原先的vender文件没有了，同时多了好几个依赖的js文件 

4、启用CDN加速

• 加快打包速度。分离公共库以后，每次重新打包就不会再把这些打包进 vendors 文件中。
• CDN减轻自己服务器的访问压力，并且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。

 

// 修改vue.config.js 分离不常用代码库
module.exports = {
 configureWebpack: config => {
  if (isProduction) {
   config.externals = {
    'vue': 'Vue',
    'vue-router': 'VueRouter'
   }
  }
 }
}
// 在public文件夹的index.html 加载
<!-- CND -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.runtime.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js"></script>

5、完整vue.config.js代码

 

const path = require('path')
// 在vue-config.js 中加入
// 开启gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 判断开发环境
const isProduction = process.env.NODE_ENV === 'production';

const resolve = dir => {
  return path.join(__dirname, dir)
}

// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
// iview-admin线上演示打包路径： https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/'
  : '/'

module.exports = {
  //webpack配置
  configureWebpack:config => {
    // 开启gzip压缩
    if (isProduction) {
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.js$|\.html$|\.json$|\.css/,
        threshold: 10240,
        minRatio: 0.8
      }));
      // 开启分离js
      config.optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name (module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace('@', '')}`
              }
            }
          }
        }
      };
      // 取消webpack警告的性能提示
      config.performance = {
        hints:'warning',
            //入口起点的最大体积
            maxEntrypointSize: 50000000,
            //生成文件的最大体积
            maxAssetSize: 30000000,
            //只给出 js 文件的性能提示
            assetFilter: function(assetFilename) {
          return assetFilename.endsWith('.js');
        }
      }
    }
  },
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  publicPath: BASE_URL,
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  devServer: {
    host: 'localhost',
    port: 8080, // 端口号
    hotOnly: false,
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    proxy:null // 配置跨域处理,只有一个代理

  },
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: true,
  css:{
    loaderOptions:{
      less:{
        javascriptEnabled:true
      }
    },
    extract: true,// 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false,// 开启 CSS source maps
    modules: false// 启用 CSS modules for all css / pre-processor files.
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('@c', resolve('src/components'))
  },
  // 打包时不生成.map文件
  productionSourceMap: false
}