构建时间优化

首先就是构建时间的优化了

thread-loader

多进程打包，可以大大提高构建的速度，使用方法是将thread-loader放在比较费时间的loader之前，比如babel-loader

由于启动项目和打包项目都需要加速，所以配置在webpack.base.js

  1. npm i thread-loader -D
  1. //my-vue-cli\build\webpack.base.js
  2. {
  3.   test: /\.js$/,
  4.   // 排除node_modules中的js
  5.   exclude: /node_modules/,
  6.   use: ['thread-loader', 'babel-loader']
  7. },

cache-loader

缓存资源，提高二次构建的速度，使用方法是将cache-loader放在比较费时间的loader之前，比如babel-loader

由于启动项目和打包项目都需要加速，所以配置在webpack.base.js

  1. npm i cache-loader -D
  1. // webpack.base.js
  2. {
  3.   test: /\.js$/,
  4.   // 排除node_modules中的js
  5.   exclude: /node_modules/,
  6.   use: ['cache-loader', 'thread-loader', 'babel-loader']
  7. },

开启热更新

比如你修改了项目中某一个文件，会导致整个项目刷新，这非常耗时间。如果只刷新修改的这个模块，其他保持原状，那将大大提高修改代码的重新构建时间

只用于开发中，所以配置在webpack.dev.js

  1. // 开发环境
  2. const { merge } = require('webpack-merge')
  3. const base = require('./webpack.base')
  4. const webpack = require('webpack')
  5. module.exports = merge(base, {
  6.   mode: 'development',
  7.   devServer: {
  8.     open: true,
  9.     //hot: true
  10.   },
  11.   devtool: 'eval-cheap-module-source-map',
  12.   plugins: [
  13.     new webpack.HotModuleReplacementPlugin(),
  14.     // 定义全局变量
  15.     new webpack.DefinePlugin({
  16.       process: {
  17.         env: {
  18.           NODE_DEV: JSON.stringify('development')
  19.           // 这里可以定义你的环境变量
  20.           // VUE_APP_URL: JSON.stringify('https://xxx.com')
  21.         }
  22.       }
  23.     })
  24.   ]
  25. })

exclude & include

  • exclude：不需要处理的文件
  • include：需要处理的文件

合理设置这两个属性，可以大大提高构建速度

在webpack.base.js中配置

{
  test: /\.js$/,
  //使用include来指定编译文件夹
  include: path.resolve(__dirname, '../src'),
  // 排除node_modules中的js
  exclude: /node_modules/,
  use: ['cache-loader', 'thread-loader', 'babel-loader']
},

构建区分环境

区分环境去构建是非常重要的，我们要明确知道，开发环境时我们需要哪些配置，不需要哪些配置；而最终打包生产环境时又需要哪些配置，不需要哪些配置：

  • 开发环境：去除代码压缩、gzip、体积分析等优化的配置，大大提高构建速度
  • 生产环境：需要代码压缩、gzip、体积分析等优化的配置，大大降低最终项目打包体积

    上篇文章已经带大家进行了环境区分

提升webpack版本

webpack版本越新，打包的效果肯定更好

本项目已经是webpack最新版本

打包体积优化

主要是打包后项目整体体积的优化，有利于项目上线后的页面加载速度提升

CSS代码压缩

CSS代码压缩使用css-minimizer-webpack-plugin，效果包括压缩、去重

代码的压缩比较耗时间，所以只用在打包项目时，所以只需要在webpack.prod.js中配置

npm i css-minimizer-webpack-plugin -D

// webpack.prod.js

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

optimization: {
  minimizer: [
    new CssMinimizerPlugin(), // 去重压缩css
  ],
}

JS代码压缩

JS代码压缩使用terser-webpack-plugin，实现打包后JS代码的压缩

代码的压缩比较耗时间，所以只用在打包项目时，所以只需要在webpack.prod.js中配置

npm i terser-webpack-plugin -D

// webpack.prod.js

const TerserPlugin = require('terser-webpack-plugin')

optimization: {
  minimizer: [
    new CssMinimizerPlugin(), // 去重压缩css
    new TerserPlugin({
      // 压缩JS代码
      terserOptions: {
        compress: {
          drop_console: true // 去除console
        }
      }
    }) // 压缩JavaScript
  ]
}

tree-shaking

tree-shaking简单说作用就是：只打包用到的代码，没用到的代码不打包，而webpack5默认开启tree-shaking，当打包的mode为production时，自动开启tree-shaking进行优化

module.exports = {
  mode: 'production'
}

source-map类型

source-map的作用是：方便你报错的时候能定位到错误代码的位置。它的体积不容小觑，所以对于不同环境设置不同的类型是很有必要的。

  • 开发环境

开发环境的时候我们需要能精准定位错误代码的位置

// webpack.dev.js

module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map'
}
  • 生产环境

生产环境，我们想开启source-map，但是又不想体积太大，那么可以换一种类型

// webpack.prod.js

module.exports = {
  mode: 'production',
  devtool: 'nosources-source-map'
}

打包体积分析

使用webpack-bundle-analyzer可以审查打包后的体积分布，进而进行相应的体积优化

只需要打包时看体积，所以只需在webpack.prod.js中配置

npm i webpack-bundle-analyzer -D

// webpack.prod.js

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

plugins: [
  new BundleAnalyzerPlugin(),
]

模块懒加载（项目中使用）

如果不进行模块懒加载的话，最后整个项目代码都会被打包到一个js文件里，单个js文件体积非常大，那么当用户网页请求的时候，首屏加载时间会比较长，使用模块懒加载之后，大js文件会分成多个小js文件，网页加载时会按需加载，大大提升首屏加载速度

// src/router/index.js

const routes = [
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path: '/home',
    name: 'home',
    // 懒加载
    component: () => import('../views/home/home.vue'),
  },
]

Gzip（需后端配合）

开启Gzip后，大大提高用户的页面加载速度，因为gzip的体积比原文件小很多，当然需要后端的配合，使用compression-webpack-plugin

只需要打包时优化体积，所以只需在webpack.prod.js中配置

pnpm i compression-webpack-plugin -D

// webpack.prod.js

const CompressionPlugin = require('compression-webpack-plugin')

plugins: [
  // 之前的代码...

  // gzip
  new CompressionPlugin({
    algorithm: 'gzip',
    threshold: 10240,
    minRatio: 0.8
  })
]

小图片转base64(已配置)

对于一些小图片，可以转base64，这样可以减少用户的http网络请求次数，提高用户的体验。webpack5中url-loader已被废弃，改用asset-module

在webpack.base.js中配置

// webpack.base.js

{
   test: /\.(png|jpe?g|gif|svg|webp)$/,
   type: 'asset',
   parser: {
     // 转base64的条件
     dataUrlCondition: {
        maxSize: 25 * 1024, // 25kb
     }
   },
   generator: {
     // 打包到 image 文件下
    filename: 'images/[contenthash][ext][query]',
   },
},

合理配置hash（已配置）

我们要保证，改过的文件需要更新hash值，而没改过的文件依然保持原本的hash值，这样才能保证在上线后，浏览器访问时没有改变的文件会命中缓存，从而达到性能优化的目的

在webpack.base.js中配置

// webpack.base.js

output: {
  path: path.resolve(__dirname, '../dist'),
  // 给js文件加上 contenthash
  filename: 'js/chunk-[contenthash].js',
  clean: true,
},

配置External外部扩展（走CDN）

CDN分布式网络可以使加载的资源路径变短，也就是加载速度会提高

  • 先配置externals ``` //build\webpack.prod.js module.exports = merge(base, { //之前的代码 externals: { vue: ‘Vue’ } })

- 再引入CDN资源

//my-vue-cli\public\index.html

```