webpack 性能优化

HtmlWebpackPlugin:

该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。在打包上线的时候需要对html也进行压缩,所以要进行如下配置

    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'test.html',
      template: 'src/assets/test.html',
      minify :{
　　　　  collapseWhitespace: true,//移除空格
 　　　　 removeComments: true,//移除注释
 　　　　 removeRedundantAttributes: true,//删除多余的属性
  　　　　removeScriptTypeAttributes: true,/删除script的类型属性，在h5下面script的type默认值
       　removeStyleLinkTypeAttributes: true, //删除style的类型属性， type="text/css"
         useShortDoctype: true//使用短的文档类型，将文档转化成html5，默认false
      }
    })

　devServer:

  开发 的时候为了缩短编译的时间通常,我们会开启热替换,配置如下

  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    host: "0.0.0.0",
    //自动打开浏览器
    open: false,
    //HMR模块热替换
    hot: true
  },
 plugins: [
   new webpack.HotModuleReplacementPlugin(),//开启热替换需要的插件
]

这里要注意一点,热替换css样式是基于style-loader实现的,所以开发环境下为了快速编译,处理css文件用style-loader,而生产环境是提升性能,所以用

mini-css-extract-plugin(将CSS提取为独立的文件,对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap)插件来代替style-loader

html:因为只有一个文件,没有模块之说,所以不做处理(修改入口文件,将html文件引入)

  entry: [
    path.resolve(__dirname, "./src/js/index.js"),
    path.resolve(__dirname, "./src/index.html")
  ]

js:

if (module.hot) { 
    module.hot.accept('./xx', () => {  // 当 xx.js 更新，自动执行此函数
        //把xx.js文件中的需要执行的函数再次执行
      fn() //xx.js里的方法
    })

　在每次加载网页,如果每次都请求服务器,可能会导致页面加载过慢,也会造成服务器资源的紧张,所以都会给网站加上缓存,所以webpack中对缓存的处理也是必不可少的

1.给js加上缓存

让你每次修改某个单独文件时,只编译修改的js文件,其他没有修改的则不变

      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            //开启缓存
            cacheDirectory: true
          }
        }
      },

2.资源文件缓存,webpack需要给你打包资源文件加上hash名,类似于版本号,用于强缓存期间,使修改过的文件可以生效.而hash又分三种:

1. hash

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

2. chunkhash

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

缺点:因为我们是将样式作为模块import到JavaScript文件中的，所以它们的chunkhash是一致的(css与js文件的hash值相同),只要对应css或则js改变，与其关联的文件hash值也会改变，但其内容并没有改变呢，所以没有达到缓存意义。

  3. contenthash

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

 配置:

  output: {
    filename: "js/[name][contenthash].js",
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/" // /代表url跟路径  打包时改为‘./’
  }
 plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name][contenthash].css"
    })
  ] 

　注:在开发环境中hotModuleReplacementPlugin(）会影响contenthash,所以在生产环境下使用contenthash,且确认没有hotModuleReplacementPlugin()