性能优化五

# 性能优化篇(五)

# 性能优化之webpack4

# 深度treeshaking

webpack-deep-scope-plugin
cssnano (opens new window) 基于postCss压缩css
purifycss-webpack

//压缩css  使用cssnano
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const _modeflag = _mode === 'production' ? true : false;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module: {
  rules: [
    {
      test: /\.css$/i,
      use: [
        'cache-loader',
        MiniCssExtractPlugin.loader,
        { loader: 'css-loader', options: { importLoaders: 1 } },
        'postcss-loader',
      ],
    },
  ],
},
plugins: [
  new MiniCssExtractPlugin({//提取css
    filename: _modeflag
    ? 'styles/[name].[contenthash:5].css'
    : 'styles/[name].css',
    chunkFilename: _modeflag
    ? 'styles/[name].[contenthash:5].css'
    : 'styles/[name].css',
    ignoreOrder: false,
  }),
  new OptimizeCssAssetsPlugin({
    assetNameRegExp: /\.css$/g,
    cssProcessor: require('cssnano'),
    cssProcessorPluginOptions: {
      preset: ['default', { discardComments: { removeAll: true } }],
    },
    canPrint: true,
  }),
],

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

js部分在webpack5中已经有集成，css目前还是得自己处理

# webpack多线程

开启多核压缩 happypack 多线程编译webpack 不支持的情况下使用thread-loader(慎用)

{
        test: /\.js$/,
        include: resolve('src'),
        //1.电脑配置强悍
        //2.确实是因为loader 分析出来 影响了编译
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: 3,
              workerParallelJobs: 50,
              workerNodeArgs: ['--max-old-space-size=1024'],
              poolRespawn: false,
              poolTimeout: 2000,
              poolParallelJobs: 50,
              name: 'my-pool',
            },
          },
        ],
      },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

JavaScript的多核压缩可以开启terser-webpack-plugin (多核压缩uglifyjs-webpack- plugin 官方维护非官方维护webpack-parallel-uglify-plugin(这块儿对Css没啥用))

//js压缩
const TerserJSPlugin = require('terser-webpack-plugin'); module.exports = {
  optimization: {
    minimizer: [new TerserJSPlugin({
			cache: true, // 是否缓存 
      paraller: true, // 是否并行打包 目前默认值true
      sourceMap: true
		})], 
  }
}

1
2
3
4
5
6
7
8
9
10

webpack5新增了这部分功能

# webpack打包速度分析和缓存

speed-measure-webpack-plugin

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap(merge(webpackConfig, _mergeConfig));

1
2
3

cache-loader分析完事哪个慢缓存哪个

'babel-loader?cacheDirectory=true' exclude: /node_modules/, // 排除不处理的目录 include: path.resolve(__dirname, 'src') // 精确指定要处理的目录

module: {
  rules: [
    {
      test: /\.css$/i,
      use: [
        'cache-loader',
        MiniCssExtractPlugin.loader,
        { loader: 'css-loader', options: { importLoaders: 1 } },
        'postcss-loader',
      ],
    },
  ],
},

1
2
3
4
5
6
7
8
9
10
11
12
13

对整个工程开启缓存 hard-source-webpack-plugin

webpack5已新增缓存功能----借鉴了hard-source-webpack-plugin

# webpack打包进度展示

progress-bar-webpack-plugin

webpackbar

# webpack外部扩展

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

例如，从 CDN 引入 jQuery (opens new window)，而不是把它打包：

index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

1
2
3
4
5

webpack.config.js

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

1
2
3
4
5
6

这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行：

import $ from 'jquery';

$('.my-element').animate(/* ... */);

1
2
3

# webpack集群编译

分模块编译，然后集合。需要掌握免密登录，js shell，webpack区分模块

# 压缩图片

image-webpack-loader

# HtmlWebpackPlugins压缩推荐选项

new HtmlWebpackPlugin({
inlineSource: ".css$",
template: path.join(__dirname, `src/${pageName}/index.html`),
filename: `${pageName}.html`, chunks: ["vendors", pageName], inject: true,
minify: {
    html5: true,
    collapseWhitespace: true,
    preserveLineBreaks: false,
    minifyCSS: true,
    minifyJS: true,
    removeComments: false,
}, });

1
2
3
4
5
6
7
8
9
10
11
12
13

# inline-manifest-webpack-plugin

inline-manifest-webpack-plugin 把runtime放到html里 html-inline-css-webpack- plugin 把一些核心的CSS放到⻚面内部 html-webpack-inline-source-plugin 内部资源引入

# 代码求值

prepack-webpack-plugin

# 动态引入

@babel/plugin-syntax-dynamic-import

# 输出依赖关系

webpack-dashboard 增强了 webpack 的输出，包含依赖的大小、进度和其他细节。

webpack-bundle-analyzer 打包结果分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin;
new BundleAnalyzerPlugin(),

1
2
3

webpack --profile --json > stats.json 14-1 ht tp://alexkuz.github.io/webpack-chart/ 14-2 http://webpack.github.io/analyse/

# 工程优化与原理篇

将构建配置设计成一个库，比如:hjs-webpack、Neutrino、webpack-blocks

Neutrino：快速构建一个项目
抽成一个工具进行管理，比如:create-react-app, kyt, nwb

更友好的提示错误

friendly-errors-webpack-plugin 配合webpackdevserver使用

devServer: {
  historyApiFallback: true,
  contentBase: join(__dirname, '../dist'),
      proxy: {
        '/api': '',
      },
  hot: true,
  quiet: true,
 },
new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: ['You application is running here http://localhost:3000'],
        notes: [
          'Some additionnal notes to be displayed unpon successful compilation',
        ],
      },
      onErrors: function (severity, errors) {
        //安装node-notifier 只想提示错误的话
      },
      quiet: true,
      clearConsole: true,
    }),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

webpack-build-notifier

const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
new WebpackBuildNotifierPlugin({
    title: 'cli',
    logo: './favicon.png',
    suppressSuccess: true,
}),

1
2
3
4
5
6

set-iterm2-badge && node-bash-title 标题和窗口内容修改

function() {
 this.hooks.done.tap('done', (stats) => {

if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') == -1)

{
 console.log('build error'); process.exit(1);

} })

}

1
2
3
4
5
6
7
8
9
10
11

splitchunks公用库的代码拆分去除打包分离⻚面公用包 html-webpack-externals- plugin

optimization: {
    runtimeChunk: {
      name: 'runtime',
    },
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5,
          minSize: 0,
          name: 'commons',
        },
      },
    },
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用动态 polyfill 它会根据你的浏览器 UA 头，判断你是否支持某些特性，从而返回给你一个合适的polyfill。https://cdn.polyfill.io/v3/ (opens new window)
集成到CI 监控文件的大小 https://github.com/siddharthkp/bundlesize
set-iterm2-badge && node-bash-title 标题和窗口内容修改

# webpack提示

@type/webpack npm

更新时间: 3/15/2022, 12:28:01 AM

← 性能优化四性能优化总结→