webpack性能优化（6）

有一种技术叫离线缓存，就是断开网络还能显示页面内容，它有两种方法，一种是appcache，不过它性能不好，已经被w3c废弃了，还有一种就是serviceWorker，它属于PWA（渐进式web应用）的一种功能。

首先要下载sw-precache-webpack-plugin，即npm i sw-precache-webpack-plugin或者yarn add sw-precache-webpack-plugin

然后引入

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const HappyPack=require('happypack');
const ParallelUglifyPlugin=require('webpack-parallel-uglify-plugin');

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

//const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin');
module.exports={
    entry:'./main.js',
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[{
            test:/\.css$/,
           use: ['happypack/loader?id=css']
        },
            {
                test:/\.js$/,
                use:['happypack/loader?id=babel'],
                exclude:path.resolve(__dirname,'node_modules')
               
            },
            {test:/\.jpg$/,
            loader:'url-loader',
            
            options:{limit:3*1034,callback:'file-loader'}
             },
              {test:/\.html$/,
              loader:'html-loader'}
           
    ]
    },

     devServer:{hot:true,
        host:'127.0.0.1',
        port:4000,
        open:true,
         compress:true,
         historyApiFallback:true
     },

    plugins:[new HtmlWebpackPlugin({template:'./index1.html'}),
   
            new HappyPack({id:'babel',loaders:['babel-loader?cacheDirectory']}),
            new HappyPack({id:'css',loaders:['style-loader','css-loader']}),
            new ParallelUglifyPlugin({
                uglifyJS:{output:{
                    beautify:false,
                    comments:false
                },
                compress:{
                   
                    drop_console:true,
                    collapse_vars:true,
                    reduce_vars:true
                }
            }
            }),
            
            new SWPrecacheWebpackPlugin({
                filename:'service-worker.js',
                minify: true,
            }
            )
           
],
    mode:'development'
}

然后在main.js中注册service-worker文件

 if('serviceWorker' in navigator){
	window.addEventListener('load',()=>{
		navigator.serviceWorker.register('./service-worker.js')
		.then(()=>{console.log('sw注册成功')})
		.catch(()=>{console.log('sw注册失败')})
		})
	}	

最后打包它会生成一个service-worker.js文件，在network中断开网络页面仍然能正常展示

除此之外，还可以在生成的service-worker文件中监听，拦截网络请求等等