webpack学习笔记（三）

访问网址： https://github.com/webpack/analyse

"scripts": {
  "dev-build": "webpack --profile --json > stats.json  --config ./build/webpack.dev.js",
} 

执行上述语句，指的是 将打包的进程放入 stats.json 文件中

如果不能访问给出的网址：

使用翻墙软件 shadowsock  ------ https://jingyan.baidu.com/article/8065f87f412d93233024987f.html

或者用IE 浏览器打开：http://webpack.github.com/analyse

其它的可视化分析工具，详见官方网站 https://github.com/webpack-contrib/webpack-bundle-analyzer

"analyz": "cross-env npm_config_report=true npm run build"

使用方法：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
if(process.env.npm_config_report){
    prodConfig.plugins.push(new BundleAnalyzerPlugin());
}

1 js压缩！

webpack4中如果使用 production 模式，默认是开启js压缩功能的。

默认optimization.minimize是true，所以js可以自动帮你压缩
但是自定义minimizer后，webpack默认配置会取消掉。
文档还很皮的告诉你，如果你用了css压缩，记得自己用uglifyjs压缩js呀。。。

optimization:{
    minimizer:[
      new TerserPlugin(),//删除后发现文件变大，确实进行了压缩
    ]
}

PS附上尚未压缩和压缩js后的文件代码对比图，文件是vendor.js

图一是尚未压缩的代码：

图二是压缩后的代码：

2. 使用preloading 和 prefetching

官方建议配置代码分割是 async 而不是 all

optimization: {
  splitChunks: {
    chunks: 'all'  //默认的是async  只对异步代码进行分割
  }
}

因为对于同步代码进行代码分割，第一次加载后有缓存，只有再第二次访问还会有效果；但这个初衷是第一次访问的时候就要是最快的。

看下面的例子：

点击一屏幕，生成一个元素，在index.js 文件中：

document.addEventListener('click',()=>{
  const element = document.createElement('div');
  element.innerHTML = 'Dell Lee';
  document.body.appendChild(element);
})

在控制台中  ctrl + shift +p  输入 cover 打开的show coverage 面板：

可以看到当前操作 代码的利用率情况，点击某一个文件 红色的表示没有被利用 绿色的表示使用了的，这样上述代码中，由于点击屏幕加载的 生成元素的代码 就是没有被利用的。

只有点击屏幕生成元素的代码 才变成 绿色 表示被利用了

所以建议这样去写：

document.addEventListener('click', () =>{
    import('./click.js').then(({default: func}) => {
        func();
    })
});

对应的click.js 写法：

function handleClick() {
    const element = document.createElement('div');
    element.innerHTML = 'Dell Lee';
    document.body.appendChild(element);
}

export default handleClick;

这个js文件会被单独打包成一个js文件，点击屏幕的时候 才会加载进来 比如要引入 日历组件；

预加载：

document.addEventListener('click', () =>{
    import(/* webpackPrefetch: true */ './click.js').then(({default: func}) => {
        func();
    })
});

这样就会在网络空闲的时候，加载click.js文件。再如异步加载的第三方库

async yibuTest(){
      let _ = await import(/* webpackPrefetch: true *//*webpackChunkName:"lodash" */'lodash');
      let newStr = _.join([1,2],'%');
      console.log(newStr);
}

3 打包出来的配置 使用 chunkFilename

module.exports = {
  entry: {
    main: './src/index.js'
  },
  optimization:{
    splitChunks:{
      chunks:'all'
    }
  },
  output:{
    filename:'[name].js',
    chunkFilename:'[name].chunk.js',
    path:path.resolve(__dirname,'../dist')
  }
}

分析： 入口文件的key值是 main，所以走output中的 filename中main.js;由于配置的 splitChunks 的chunks是all，所以会默认打包 间接引入的文件 import文件，默认在vernders组下，这里配置的chunkFilename即间接打包生成的文件名字，所以生成的文件是：

-dist
  -index.html
  -main.js
  -vendors~lodash.chunk.js

4. 打包css文件，生成css文件

如果不做配置，import引入的css文件会默认打包到js文件中，所以要使用官方推荐的css打包插件： mini-css-extract-plugin

但是该插件暂时不支持 HRM 热更新，所以只在线上版本上使用。也就是在 webpack.prod.json 文件中进行配置：

首先安装该插件  npm install --save-dev mini-css-extract-plugin //安装插件

然后在配置文件中使用：

{
  module: {
    rules:[{
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,  //在上线配置文件中对css和scss文件，用插件替换原来的 style.loader
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader'
      ]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({ //插件在这里使用
      filename: '[name].css',
      chunkFilename: '[name].chunk.css' //css文件import进来的文件在这里配置文件名
    })
  ]
}

此外，由于之前在配置 tree-shaking 也就是 使用到代码 才进行打包：

optimization:{
   usedExports:true  //即对所有的模块都进行tree-shaking
}

还在package.json中进行配置：

{
   "sideEffects":false
}

表示对所有的文件进行tree-shaking，所以对inport的css文件发现没有使用，则删除了。

所以要进行配置：

{
"sideEffects": [
    "*.css"
  ]
}

对生成的css文件，进行压缩，使用插件  optimize-css-assets-webpack-plugin

npm install --save-dev optimize-css-assets-webpack-plugin

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
{
  optimization: { //对抽离出来的css文件进行合并和压缩
    minimizer: [new OptimizeCSSAssetsPlugin({})]
  }
}

更多配置详见官网：（比如多个css入口打包成多个文件或者一个文件）

https://webpack.js.org/plugins/mini-css-extract-plugin/

附：

使用ExtractTextWebpackPlugin单独抽取css注入

5 打包生成的文件中带上hash值

{
  output: {
    filename:'[name].[contenthash].js',
    chunkFilename:'[name].[contenthash].js'
  }
}

webpack中hash、chunkhash、contenthash区别

https://www.cnblogs.com/raind/p/9750586.html

简单来说：

1.hash              如果都使用hash的话，因为这是工程级别的，即每次修改任何一个文件，所有文件名的hash至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效

2.chunkhash     根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。因为我们是将样式作为模块import到JavaScript文件中的，所以它们的chunkhash是一致的；

3.contenthash    是针对文件内容级别的，只有你自己模块的内容变了，那么hash值才改变.

注意事项：

新版本的webpack可以，但是旧版本的webpack，即使这样配置后，如果修改一处代码，生成的js名字还会发生变化，需要做下面的配置：

{
  optimization: {
    runtimeChunk:{
      name:'runtime'
    }
  }
}

这样一些关联 vendor.js和main.js之间关联的代码就会生成在 runtime.js 中，这样修改业务代码，就不会再影响vendor代码了。