webpack性能优化_webpack优化-CSDN博客

本文链接：https://blog.csdn.net/hkduan/article/details/106851059

Rollup : Webpack 大而全，Rollup 小而美，如果开发应用程序，用 Webpack，如果开发库/框架开发使用 Rollup.
模块最终都被打包到一个函数中，无法实现 HMR
优点

输出结果更加扁平
自动移除未引用代码
打包结果依然完全刻度
缺点

加载非 WSM 的第三方模块比较复杂
模块最终都被打包到一个函数中，无法实现 HMR
浏览器环境中，代码拆分功能依赖 AMD 库

webpack常见插件：
plugins
html-webpack
clean-webpack
bable
polyfill
多线程插件 t
postcss //加前缀，用于将 px 单位转化为 vw/vh 单位

webpack性能优化

开发环境性能优化
生产环境性能优化
webpack 打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）

开发环境性能优化

1.1、速度分析
npm i -D speed-measure-webpack-plugin
然后修改 vue.config.js 配置文件（vuecli3+ 版本的配置文件统一在这个文件里修改，如果没有该文件，在根目录新建一个）

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
// 实例化插件
const smp = new SpeedMeasurePlugin();
 
module.exports = {
    configureWebpack: smp.wrap({
        plugins: [
            // 这里是自己项目里需要使用到的其他插件
            new yourOtherPlugin()
        ]
    })
}

1.2 体积分析npm i -D webpack-bundle-analyzer
修改 vue.config.js 配置文件

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
// 导入体积分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 
// 实例化速度分析插件
const smp = new SpeedMeasurePlugin();
 
module.exports = {
    configureWebpack: smp.wrap({
        plugins: [
            // 实例化体积分析插件
            new BundleAnalyzerPlugin()
        ]
    })
}

webpack 打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）
1.多进程打包
多进程构建的方案比较知名的有以下三个：
thread-loader (推荐使用这个)
parallel-webpack
HappyPack
npm i -D thread-loader
接下来在 vue.config.js 配置文件中使用该 loader

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
// 实例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    configureWebpack: smp.wrap({
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['thread-loader']
                }
            ]
        }
    })
}

2.公用代码提取，使用 CDN 加载
对于vue，vuex，vue-router，axios，echarts，swiper等我们可以利用webpack的externals参数来配置，这里我们设定只需要在生产环境中才需要使用。
下面配置 vue.config.js

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
// 导入体积分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 
//判断是否为生产环境
const isProduction = process.env.NODE_ENV === 'production';
 
//定义 CDN 路径，这里采用 bootstrap 的 cdn
const cdn = {
    css: [
        'https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css'
    ],
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
        'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
        'https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js',
        'https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js',
    ]
}
 
// 实例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    chainWebpack: config => {
        // 生产环境配置
        if (isProduction) {
            // 生产环境注入 cdn
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    },
    configureWebpack: smp.wrap({
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['thread-loader']
                }
            ]
        },
        plugins: [
            new BundleAnalyzerPlugin()
        ],
        //生产环境注入 cdn
        externals: isProduction && {
            'vue': 'Vue',
            'vuex': 'Vuex',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'echarts': 'echarts',
            'swiper': 'Swiper'
        } || {}
    })
}

<!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- 使用 CDN 的 CSS 文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
  <% } %>
</head>
 
<body>
  <noscript>
    <strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 
 <!-- 使用 CDN 的 JS 文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
</body>
 
</html>

3.多进程压缩
并行压缩主流有以下三种方案

使用 parallel-uglify-plugin 插件
uglifyjs-webpack-plugin 开启 parallel 参数
terser-webpack-plugin 开启 parallel 参数（推荐使用这个，支持 ES6 语法压缩）
npm i -D terser-webpack-plugin
接下来在 vue.config.js 配置文件中使用插件，最终的配置文件如下

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
// 导入代码压缩插件
const TerserPlugin = require("terser-webpack-plugin");
 
// 导入体积分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 
//判断是否为生产环境
const isProduction = process.env.NODE_ENV === 'production';
 
//定义 CDN 路径，这里采用 bootstrap 的 cdn
const cdn = {
    css: [
        'https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css'
    ],
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
        'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
        'https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js',
        'https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js',
    ]
}
 
// 实例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    chainWebpack: config => {
        // 生产环境配置
        if (isProduction) {
            // 生产环境注入 cdn
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    },
    configureWebpack: smp.wrap({
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: ['thread-loader']
                }
            ]
        },
        plugins: [
            new BundleAnalyzerPlugin()
        ],
        //生产环境注入 cdn
        externals: isProduction && {
            'vue': 'Vue',
            'vuex': 'Vuex',
            'vue-router': 'VueRouter',
            'axios': 'axios',
            'echarts': 'echarts',
            'swiper': 'Swiper'
        } || {},
        optimization: {
            minimizer: [
                new TerserPlugin({
                    parallel: 4
                })
            ]
        }
    })
}

4.使用 polyfill 动态服务
使用方法：在 index.html 中引入如下 script 标签

HMR
优化代码调试
- source-map

生产环境性能优化

优化打包构建速度
- oneOf
- babel缓存
- 多进程打包
- externals
- dll
优化代码运行的性能
- 缓存(hash-chunkhash-contenthash)
  推荐contenthash
- babel缓存
  cacheDirectory: true
  让第二次打包构建速度更快
- tree shaking
  去除无用代码，未使用的模块，减少打包体积
  (前提：1使用es6模块，2开启production环境)
- code split
  //配置多入口
  entry: {
  index: ‘./src/js/index.js’,
  test: ‘./src/js/test.js’
  }
  //1. 可以将node_modules中代码单独打包一个chunk最终输出
  //2. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk(如index.js和test.js都引入了jquery，会把jquery单独提取出来)
  /
  optimization: {
  splitChunks: {
  chunks: ‘all’
  }
  }
  //3./
  通过js代码，让某个文件被单独打包成一个chunk
  import动态导入语法：能将某个文件单独打包
  /
  import(/ webpackChunkName: ‘test’ */‘./test’)
  .then(({ mul, count }) => {
  // 文件加载成功~
  // eslint-disable-next-line
  console.log(mul(2, 5));
  })
  .catch(() => {
  // eslint-disable-next-line
  console.log(‘文件加载失败~’);
  });
- 懒加载/预加载(延时加载，事件判断加载)
  document.getElementById(‘btn’).onclick = function() {
  // 懒加载_{：当文件需要使用时才加载}
  // 预加载 prefetch：会在使用之前，提前加载js文件
  // 正常加载可以认为是并行加载（同一时间加载多个文件）
  // 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
  import(/* webpackChunkName: ‘test’, webpackPrefetch: true */‘./test’).then(({ mul }) => {
  console.log(mul(4, 5));
  });
  };
- pwa
  offline-plugin
  plugins: [
  // … 其他插件
  new OfflinePlugin()
  ]
  index.js中:
  import * as OfflinePluginRuntime from ‘offline-plugin/runtime’;
  OfflinePluginRuntime.install();

不使用脚手架情况下，操作webpack
cnpm init -y // 新建package.json
cnpm i webpack webpack-cli --save-dev // 开发模式下的

// 开发环境打包:
webpack ./src/index.js -o ./dist/bundle.js --mode=development
// 生产环境打包：
webpack ./src/index.js -o ./dist/bundle_production.js --mode=production

//html和js打包在一起
cnpm i -D html-webpack-plugin

webpack4, webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli
直接敲webpack-cli编译webpack.config.js

cnpm i -D html-loader url-loader file-loader

// 清除老的文件
yarn add clean-webpack-plugin -D

//设置上线环境，进一步压缩
npm install --save-dev uglifyjs-webpack-plugin

// 热更新模块
npm i webpack-dev-server -D
// 运行热更新
webpack-dev-server
热更新的文件在内存中，不会输出

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 导入每次删除文件夹的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 进一步压缩js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const webpack = require('webpack');
console.log(path.resolve(__dirname, 'dist'))
module.exports = {
    // 入口文件
    entry: "./src/index.js",
    output: {
        // 输出文件名称
        filename: "bundle.js",
        // 输出的路径,绝对路径
        path: path.resolve(__dirname, 'dist')
    },
    // 开发模式 或者production(生产模式)
    mode: 'development',
    // loader的配置
    module: {
        // 对某种格式的文件进行转换处理
        rules: [
            {
                // 正则匹配，css结尾的文件
                test: /\.css$/,
                use: [
                    // use数组里面解析顺序是从下到上
                    // 将js的样式内容插入style标签
                    "style-loader",
                    // 将css文件转换为js
                    "css-loader"
                ]
            }, {
                // 匹配图片文件
                test: /\.(jpg|png|gif|bmp)$/,
                loader: 'url-loader',
                // 图片小于8kb,base64处理,减少请求的数量,会使体积更大
                options: {
                    limit: 8 * 1024,
                    // url-loader的es6模块化解析
                    esModule: false,
                    // [hash:10]取前图片hash的前10位  [ext]图片扩展名
                    name: '[hash:10].[ext]',
                    outputPath: './img',
                    publicPath: '/img'
                }

            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    // plugins插件配置
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })

    ],
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        warnings: false,
                        drop_debugger: true,
                        drop_console: true
                    }
                }
            })
        ]
    },
    // 热更新
    devServer: {
        // 项目构建路径
        contentBase: path.resolve(__dirname, "dist"),
        // 启动gzip压缩
        compress: true,
        port: 3000,
        // 自动打开浏览器
        open: true
    }
}

loader和plugin的区别
loader是加载a文件，存为b文件，如sass存为css
plugin是功能插件，
对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的文件转换过程
使用webpack 的loader (url-loader) 进行处理小体积的图片转为base64格式，减少请求次数。

plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

Tree-shaking 删除不用的js模块

webpack打包顺序

1、读取入口文件；
2、分析入口文件，得到其所依赖的文件信息；
3、递归读取每个文件的依赖信息，生成AST树，得到关系依赖图；
4、代码转化，生成ES5代码