webpack六探-打包分析、懒加载、浏览器缓存、shimming、环境变量

打包分析：

我们可以借助一些工具，来分析打包出来的文件，来看它是否合理。

官方指令：https://github.com/webpack/analyse
我们只需在package.json的打包命令中加入 --profile --json > stats.json ，如：

"devbuild": "webpack --profile --json > stats.json --config ./build/webpack.dev.js",

就会在打包时生成一个stats.json文件，然后将文件在http://webpack.github.io/analyse/中打开即可看到一些打包信息。
也可以通过一些第三方分析工具进行分析：https://www.webpackjs.com/guides/code-splitting/#bundle-%E5%88%86%E6%9E%90-bundle-analysis-

懒加载：

懒加载不是webpack中的概念，懒加载是在用户需要的时候再去加载相应的模块或者依赖，比如当我们点击按钮的时候才需要用到它，那么我们就不需要在一开始就加载进来，而是采用异步加载的方式。懒加载可以提升应用的初始加载速度，但是并不能提升用户体验（点击按钮加载相关依赖耗时，性能差），所以需要用到Prefetch/Preload

prefetch是在主要js加载完成后，带宽空闲的时候去加载相关依赖，如用户进入页面后去加载登录模块，就不需要在点击的时候再去加载；
preload是和主要js一起加载，所以更加推荐使用prefetch
webpack中prefetch的使用：import(/* webpackPrefetch: true */ 'LoginModal');

浏览器缓存：

当打包生成的js文件过大时，会产生警告，如果要去掉警告，只要在webpack.common.js中增加设置：performance:false,
当我们上线的时候需要加一个hash值，以免修改内容重新上传以后用户还是拿到缓存中的值，所以需要修改output：

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

在老一些的webpack4版本中还需要配置：

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

因为业务(main.js)和库(vendors.js)之间存在关联(manifest)，它们之间的关系放在runtime.js当中，而新版本配置了这个也不会有什么问题，所以可以直接配置上。

shimming（垫片）：

为了解耦，webpack是基于模块进行打包的，所以当我们引入的库（A）是基于另一个库（B）的时候，理论上就需要先引入库（A），这样明显是不符合需求的，而webpack当中有一个功能帮我们解决了这个问题：

plugins: [
    ...
    new webpack.ProvidePlugin({
        $:'jquery'
    })
],

上例是指，当我们使用的库中有需要用到jquery的时候（如jquery.ui.js），会先自动加载jquery库。也可以这样使用：

plugins: [
    ...
    new webpack.ProvidePlugin({
        _join:['lodash','join']
    })
],

以上是指当我们使用_join方法的时候，会先加载lodash中的join方法

当我们在模块中输出 this === window 的时候，会发现结果是false，因为模块中的this都指向自身，那么当我们需要将this指向window的时候需要借助一个loader：

npm install imports-loader -D

{
    test: /.js$/,
    exclude: /node_modules/,
    use:[{
        loader: "babel-loader"
    },{
        loader:'imports-loader?this=>window'
    }]
}

环境变量的使用方法：

我们除了使用开发和生产环境的webpack配置，还可以根据环境变量不同来区分打包内容，使用函数的形式进行导出：

module.exports=env=>{
    if(env && env.production){
        return merge(commonConfig,prodConfig);  // 生产环境
    }else{
        return merge(commonConfig,devConfig);   // 开发环境
    }
}

那么env该怎么传入呢？需要在package.json中进行配置：
"build": "webpack --env.production --config ./build/webpack.common.js"
开发环境就不需要传入