webpack 依赖优化

2022-02-02 05:12:54

noParse

提高构建速度
直接通知webpack忽略较大的库
被忽略的库，不能有import ,require, define的引入方式

配置方式： wepack.config.js中，module: {noParse: /lodash/}

DllPlugin

避免打包时不变的库重复构建

提高构建速度

webpack.all.config.js：

const webpack = require(‘webpack‘);
const path = require(‘path‘);

module.exports = {
  entry: {
    vendor: [‘react‘, ‘react-dom‘, ‘mobx‘, ‘mobx-react‘,‘react-router-dom‘, ‘lodash‘, ‘axios‘],
  },

  output: {
    path: path.join(__dirname, ‘..‘, ‘dll‘),
    filename: ‘[name].js‘,
    library: ‘[name]‘,
  },

  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, ‘..‘, ‘dll‘, ‘manifest.json‘),
      name: ‘[name]‘,
    }),
  ]
};

在package.json中："dll-build": "webpack ENV=production --config script/webpack.dll.config.js"

在webpack.config.js中

new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require(‘../dll/manifest.json‘),
    })

代码拆分（code splitting）

默认打包成一个bundle，代码拆分就是把这单个的bundle文件拆分成若干个bundles/chunks

缩短首屏加载时间

方式：

手动增加代码入口，

splitChunks提取公有代码，拆分业务代码与第三方库

splitChunks: {
      chunks: ‘all‘,
      cacheGroups: {
        libs: {
          name: ‘chunk-libs‘,
          test: /[\\/]node_modules[\\/]/,
　　　　　　minSize:0,
          priority: 10,
          chunks: ‘initial‘, 
        },
        antd: {
          name: ‘chunk-antd‘, 
          priority: 20, 
          test: /[\\/]node_modules[\\/](@ant-design|antd)[\\/]/,
          chunks: ‘initial‘, 
        },
        echarts: {
          name: ‘chunk-echarts‘, 
          priority: 20,
          test: /[\\/]node_modules[\\/](echarts|echarts-for-react)[\\/]/,
          chunks: ‘async‘, 
        },
      },
    },

webpack的资源压缩

terser-webpack-plugin压缩js, webpack默认配置

mini-css-extract-plugin 压缩css

html-webpack-plugin ->minify 压缩html

new MiniCssExtractPlugin({
      filename: `${staticPath}/css/[name].[contenthash:16].css`,
      chunkFilename: `${staticPath}/css/[name].[contenthash:16].css`,
    }), //css压缩
    new OptimizeCssAssetsPlugin() //css压缩的优化

new HtmlWebpackPlugin({
    template: path.resolve(__dirname, ‘../src/public/index.html‘),
    filename: path.resolve(__dirname, ‘../dist/index.html‘),
    minify: {
      removeComments: false, // 去注释
      collapseWhitespace: false, // 压缩空格
    },
  }),

webpack的持久化缓存

每个打包的资源文件有唯一的hash值
修改后只有受影响的文件hash变化
充分利用浏览器的缓存

hash是文件的hash, chunkhash(每个)代码段的唯一的hash（其css和js一样），contenthash(css和js的不一样，相互独立，推荐使用)

webpack的应用大小检测与分析

stats分析与可视化 webpack chart,在线，webpack --profile --json ->stats.json,到网站上查看（github上的webpack-chart）

source-map-explorer 分析（打包后的）文件组成（推荐）

speed-measure-webpack-plugin （打包的）速度分析

source-map-explorer

source-map-explorer 基于source-map，

需要配置webpack.config.js, devtool: ‘hidden-source-map‘

需要配置package.json--》script-->analyze中使用命令： source-map-explorer ‘build/*.js‘

npm run bulid

npm run analyze

speed-measure-webpack-plugin

实例.wrap(webpack配置)

React按需加载

react router 基于webpack动态引入
使用reloadable高级组件

react-loadable 动态加载组件,

安装：npm i @loadable/component
引入：import loadable from ‘@loadable/component‘
调用：loadable(()=>import(‘./SSS.JSX),{fallback:‘<div>loading...</div>})

　　SSS会被拆分出一个bundle