webpack性能优化

以提升团队开发效率，提升用户体验为目的

优化方案

• 使用 多线程优化构建速度
• 使用 分包减少构建文件体积
• 减少构建构建目标提升构建速度

诊断方法

1.构建速度(开发效率)

• 使用 speed-measure-webpack-plugin 解析打包速度
• 显示每个loder和plugin执行时间，会将耗时长的红色标记出来
• 插件地址

//安装 npm i speed-measure-webpack-plugin -D
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin()
smp.wrap(webpackConfig)

2构建体积(用户体验)

• 使用 webpack-bundle-analyzer 解析打包后文件体积
• 文件大小可视化，找出错误引入的模块 ，可以生成解析文件，方便优化对比
• 插件地址

//安装 npm i webpack-bundle-analyzer -D
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

方案

1.构建性能优化之多进程

• 使用 thread-loader 解析打包速度
• js 为单线程 使用hread-loader可以开启多个进程并发处理任务
• 使用时应该将其放在其他loader前
• 开启进程也会耗时，请仅在耗时操作中使用此loader
• 运行在worker中的loader限制 1.不能生成新的文件，2.不能使用自定义的loader API，3.不能获取webpack的配置
• 插件地址

//安装 npm install --save-dev thread-loader
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        use: [
          "thread-loader",
          // 耗时的 loader （例如 babel-loader）
        ],
      },
    ],
  },
};

2.分包和模板的自动引用

• 在打包中经常会出现单个文件较大的情况，又偏偏是网页最先加载的文件，会使得加载时间过长白屏，
• 分包就是把变化几率很小的三方库分离出来，提前打包好使用DllPlugin进行分包
• 目的就是降低单个文件大小，将三方库分离出来

分包实现步骤

• 1.分包：定义webpack.dll.config.js,使用DllPlugin 配置分包
• 2.排除分包：在config.js中使用DllReferencePlugin 引用manifest文件排除分包
• 3.引用dll:使用add-asset-html-webpack-plugin引用分包文件

//第一步 在根目录生成分包的webpack分包的配置文件
//列build文件夹下webpack.dll.config.js文件
const path=require('path')
const webpack=require('webpack')
module.exports = {
mode:"production",
entry:{
	vue:['vue','vuex','vue-router']
},
output:{
	path:path.resolve(__dirname,'../dll'),
	filename:'[name].dll.js',
	library:'[name]_[hash]'
	},
plugins:[
	new webpack.DllPlugin({
	path:path.resolve(__dirname,'../dll','[name]-manifest.json'),
	name:'[name]_[hash]'
	})
]  
}

//第二步  在package.json文件生成分包命令  列“build-dll”：“webpack --config build/webpack.dll.config.js”

//第三步在webpack.config文件中 排除分包过的文件
const path=require('path')
const webpack=require('webpack')
module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
     context: __dirname,
     manifest:path.resolve(__dirname,“.dll/vue-manifest.json”)
    })
  ]
}

模板的自动引用

• SpeedMeasurePlugin 会与AddAssetHtmlPlugin冲突，使用的时候将其disable 设置为true
• 打包完自动引用的路径为绝对路径可以将publicPact设置为'./'

const AddAssetHtmlPlugin=require('add-asset-html-webpack-plugin')
module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
     context: __dirname,
     manifest:path.resolve(__dirname,“.dll/vue-manifest.json”)
    }),
    new AddAssetHtmlPlugin({
    filefath:path.resolve(__dirname,“.dll/vue.dll.js”)
    })
  ]
}

3.通过缓存提升打包性能

• 插件地址

const path=require('path')
const webpack=require('webpack')
module.exports = {
  cache: {
    type: 'filesystem',
    allowCollectingMemory: true,
  },
};

4 .压缩图片大小

• 设计师提供的图片较大会影响用户的访问性能

• 插件地址

//安装 npm install -D image-webpack-loader
rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
  //  'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true, // webpack@1.x
        disable: true, // webpack@2.x and newer
      },
    },
  ],
}]

5.优化css体积

• 在大型项目中经常会有很多样式在代码中为被使用但是也会被打包，通过purgecss-webpack-plugin

• 插件地址

//安装 npm i purgecss-webpack-plugin -D
const glob = require("glob");
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    })
  ]
}