webpack学习tree shaking tree shaking，英文翻译是摇树，当我们摇晃树的时候，树上那些枯萎的

fileName与chunkFilename区别

filename：对应的是entry中生成的文件的名字。
chunkFilename: 指的是那些未被列在entry中，但在某些情景下需要被单独打包的文件的名称配置（比如按需（异步）加载模块的时候）。

产生chunk的三种途径：

entry 入口，传递数组给entry时：只会产生一个Chunk。Webpack会将数组里的源代码，最终都打包到一个Bundle里，原因就是只生成了一个Chunk；传递对象给entry时：对象中一个字段就会产生一个Chunk。
代码分割产生Chunk：splitChunks
异步加载：webpackChunkName --webpack魔法注释

import React from 'react';
import Loadable from 'react-loadable';

const AsyncComponent = Loadable({
    loader: () => import(/* webpackChunkName: "passenger-module" */'./CssCom'),
    loading: () => {
        return <div>ssssss</div>
    }
});

export default (props) => (
   <AsyncComponent {...props} />
);

   entry: "./src/client/index.js",
   output: {
        filename: "index.js",
        path: path.resolve(__dirname, "public"),
        chunkFilename: '[name].bundle1.js'
    }

2022-07-27 21-53-37屏幕截图.png tree shaking

tree shaking，英文翻译是摇树，当我们摇晃树的时候，树上那些枯萎的叶子便会掉落下来。在我们的代码中，tree shaking通常用来描述去掉代码中那些没有被javascript上下文引用的代码（dead code elimination，依赖于ES2015中的 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。）.tree shaking 之后，可以使加载的js代码更小，执行的时间更短。 tree shaking局限性
optimization.sideEffects：
- 如果一个es6模块只是export一些变量或者函数，则该模块是没有副作用的。但是一个模块如果除了导出变量或者函数，还做了其他操作，比如定义全局变量。如果不进行一定配置，这种副作用代码也会在打包的时候被忽略掉。可通过一定配置保留具有副作用的代码.

{
/**
   * 该设置是针对于像 @babel/polyfill 等类型的⽂件做额外处理的
   * 这类⽂件没有导出任何功能，只是在 window 对象中绑定了⼀些全局变量
   * 为避免打包时 tree-shaking 会忽略掉这类⽂件，因此需要该设置
   * sideEffects 为 false 时，表⽰ tree-shaking 只打包有导出某些功能且被引⽤的模块
   * css/less/scss ⽂件⼀般也是没有导出任何功能的模块⽂件
   */
  "sideEffects":[
    "@babel/polyfill",
    "*.css",
    "*.less",
    "*.scss"
    ]
}

当我们在项目中设置了tree shaking之后，还要对babel的配置做下修改，例如@babel/preset-env，当他在转码的时候会把我们es6的语法转化为其他模块化的语法，需要在他的配置中加一个modules：false的配置，告诉babel不需要将es6的语法转化为其他模块化语法，保留es6语法。

基于webpack的资源压缩

压缩js
- uglifyjs-webpack-plugin
- terser-webpack-plugin
css压缩
- mini-css-extract-plugin：将 CSS 提取为独立的文件的插件，对每个包含 CSS 的 JS 文件都会创建一个 CSS 文件，将CSS文件从JavaScript中分离出来，并通过link标签引入到html-webpack-plugin生成的html文件中。使用方法：我们需要使用的是这个插件的 loader ，这个loader需要在 css-loader之前添加（webpack 3.0 通常使用# extract-text-webpack-plugin，webpack 4.0 通常使用 mini-css-extract-plugin）。
- optimize-css-assets-webpack-plugin：用于优化压缩css资源

let MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins: [
 new MiniCssExtractPlugin(```
{
      //filename 其实跟output中的filename是一样的
      filename: "[name].css",
      //`chunkFilename`的值`[id].css`就是告诉webapck如何处理非`entry`模块。
      `entry`中的模块既可以使用`name`，也可以使用`id`，而非`entry`的只能使用
      `id`，默认的`chunkFilname`就是`[id].css`，可以不设置。( 参考：https://blog.csdn.net/xiaoliliaq/article/details/116654534)
      chunkFilename: "[id].css",
    }
```)
]
rules: [
  {test: '/.\css$/', use: [
    MiniCssExtractPlugin.loader, 'css-loader'
  ]}
]

Hash: f0856d7819896631db4b
Version: webpack 4.28.4
Time: 3391ms
Built at: 2019-01-15 18:03:59
          Asset       Size  Chunks             Chunk Names
           0.js  383 bytes       0  [emitted]  commons
       0.js.map  196 bytes       0  [emitted]  commons
           1.js  189 bytes       1  [emitted]  vendor
       1.js.map  857 bytes       1  [emitted]  vendor
           2.js   1.54 KiB       2  [emitted]  A
       2.js.map   5.31 KiB       2  [emitted]  A
           3.js   1.55 KiB       3  [emitted]  B
       3.js.map    5.3 KiB       3  [emitted]  B
           4.js   1.58 KiB       4  [emitted]  C
       4.js.map   5.31 KiB       4  [emitted]  C
    commons.css   60 bytes       0  [emitted]  commons
commons.css.map  150 bytes          [emitted]
     index.html  321 bytes          [emitted]

压缩js
- html-webpack-plugin
构建速度测量
- speed-measure-webpack-plugin
跟服务端渲染有关的
- @loadable/webpack-plugin， @loadable/babel-plugin（生成loadable-stats.json）（在node端使用@loadable/server.ChunkExtractor,与客户端的@loadable/component一起使用）

webpack中各种plugin跟loader每次用的时候都要现查，让人头大，也有可能是我用的比较少的缘故，所以打算记下来，方便之后随时查看。参考：

webpack学习

产生chunk的三种途径：

optimization.sideEffects：

基于webpack的资源压缩