Webpack:PWA离线缓存

1.webpack中如何实现离线缓存？

1.下载插件

npm install workbox-webpack-plugin -D
npm  install  http-server  -D

2.在package.json文件中，进行配置服务器

"scripts":{
    "start":"http-server dist",
    "build":"webpack"
}

3.在webpack.config.js中进行配置

const  WorkboxPlugin=require('workbox-webpack-plugin')
module.exports={
      //实例化此插件
      plugins:[
           new WorkboxPlugin.GenerateSW({
                 clientsClaim:true,
                 skipWaiting:true
           })
      ]
}
npm  install  http-server  -D

4.在入口文件业务代码里加上一下代码，测试一下

if('serviceWorker' in navigator){
    window.addEventListener('load',()=>{
        navigator.serviceWorker.register('/service-worker.js').then(registration=>{
             console.log('server-worker registed')
        }).catch(erroe=>{
             comsole.log('service-worker register error')
        })
    })
}

然后通过 npm run build进行打包
通过npm run start 运行服务器

当断开服务器以后，在访问这个端口，依然可以正常显示，这是刚才配置的离线缓存文件，给存储了，这也给我们带来了很大的便利，也给用户带来了很好的体验

2.css文件代码分割

如果我们想让引入的css文件，在打包时，单独生成一个css文件到dist目录的话，可以这样做

1.下载一个插件

npm install --save-dev mini-css-extract-plugin

2.在webpack.config.js配置

const  MinCssExtractPlugin=require('mini-css-extract-plugin');
module.exports={
    plugin:[new MiniCssExtractPlugin()],
    module:{
        rules:[
           {
             test:/\.css$/i,
             use:[MiniCssExtractPlugin.loader,'css-loader']
           }
        ]
    }
}

这个时候引入的css文件，不会生成到js中，而是单独成了css文件

3.对打包的css进行压缩处理？

1.下载插件

npm install optimize-css-assets-webpack-plugin -D
npm  install  http-server  -D

2.在webpack.config.js文件中，进行配置

const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={
  optimization:{
     minimizer:[new TerserJSPlugin({}),new OptimizaCSSAssetsPlugin({})],
  },
  plugins:[
       new MiniCssExtractPlugin({
            filename:'[name].css',
            chunkFilename:'[id].css'
       })
  ],
  module:{
      rules:[
           {
               test:/\.css$/,
               use:[MiniCssExtractPlugin.loader, 'css-loader']
           }
      ]
  }
}

4.什么是打包分析？

当我们使用webpack进行代码的打包之后，我们可以借助打包分析的一些工具来对我们打包生成的一些文件进行一定的分析，来判断打包的是否合理

1.在package.json文件里配置

  "script":{
      "dev-build":"webpack--profile--json>stats.json--config ./build/webpack.dev.js"
  }
  npm run dev-build进行打包

2.打包之后会生成一个stats.json文件

1.github.com/webpack.ana… 打开这个网站
2.在里面有一个 https:///webpack.github.com/analyse，进入此网站
3.点击JSON file将我们生成的stats.json文件进行上传可以帮助我们进行分析我们打包文件
4.还可以使用其他的打包分析文件的工具在webpack官网上打开指南，有一个Code Splittiing下面的Bundle Analysis里面有一些工具，比如webpack chart等