Sheldon_Law

前端性能优化：webpack分离 + LocalStorage缓存

一，优化背景

上一篇关于webpack优化的文章webpack + react 优化：缩小js包体积谈到如何缩小webpack打包后的js代码体积，来减少网络请求数据量，这次尝试将第三方库（React，ajax等）从业务代码中分离出来，并且将分离出来的第三方库缓存在LocalStorage中。

该次优化的出发点有下面两点：

①每次更改业务代码都会打包成新的bundle.js,前端需要抛弃以前的HTTP缓存重新下载249K左右的bundle.js,即使改变的业务代码很少。
②尝试使用LocalStorage（移动端上兼容很好）

第一点是痛点，第二点是作为前端工程师学习研究用的，希望足够严谨不会给用户带来副作用。

优化结果

①webpack分离出业务代码和第三方库

分离前：

分离后：bundle.js 为业务代码，vendor.js为第三方库代码（几乎不更新）

②使用LocalStorage缓存第三方库到本地

缓存前：

缓存后：（少下了198KB的libs.js，注：这里的app对应上面的bundle.js，libs对应vendor.js）

下面上相关代码。

二，优化思路

①将公用库分出来

这一部给出webpack配置文件即可，注意看注释部分：

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    //业务代码
    bundle: path.resolve(__dirname, 'src/main.jsx'), 
    //第三方库
    vendor: ["react","react-dom","react-router","@fdaciuk/ajax"]
  },
  //输出路径
  output: {
    path: __dirname + '/server/public',
    publicPath: '/',
    filename: './[name].js'
  },
  module: {
    loaders:[
      { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
      { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") },
      { test: /\.(jpg|png)$/, loader: "url" },
      { test: /\.js[x]?$/, include: path.resolve(__dirname, 'src'), exclude:/node_modules/, loader: 'babel-loader' },
      { test: /\.woff$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
      { test: /\.ttf$/, loader: "file-loader?prefix=font/" },
      { test: /\.svg$/, loader: "file-loader?prefix=font/" }
    ]
  },
  resolve: {
    extensions: ['', '.web.js', '.js', '.json', '.jsx'],
    modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],
  },
  plugins: [
    new webpack.optimize.DedupePlugin(),
    new ExtractTextPlugin("bundle.css"),
    //将第三方库打包到vendor.js
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }),
    new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV), }, }),
    new webpack.optimize.UglifyJsPlugin({ output: { comments: false, }, compress: { warnings: false } }),
  ]
};

关于这部分深入的理解和学习可以看webpack的示例.

②将公用库缓存在LoaclStorage中

这一步比较好玩，涉及到的东西也比较多，先上学习参考资料：

MDN：LocalStorage
知乎：静态资源（JS/CSS）存储在localStorage有什么缺点？为什么没有被广泛应用？
Dynamic script addition should be ordered?（动态添加的script标签会按顺序执行吗？）

关于这一部分，有两个要点：

LocalStorage缓存
LocalStorage缓存版本控制

按照惯例：上源码


<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title>Examplestitle>
<meta name="description" content="">
<meta name="keywords" content="">

<noscript>
  <script src="vendor.js">script>
  <script src="bundle.js">script>
noscript>
<script>
  //这则匹配获取两个script的src
  var script_info = document.head.querySelector('noscript').innerText.split(/\s/).join('').match(/src="(.+)".*src="(.+)"/);
  var vendor_src = script_info[1], bundle_src = script_info[2];
  var vendor_script = document.createElement('script'), 
      bundle_script = document.createElement('script'); vendor_script.defer = true;
  bundle_script.defer = true, bundle_script.src = bundle_src;
  if (window.localStorage) {
    var cur_version = vendor_src, vendor = null;
    if (window.localStorage.getItem("vendor_version") == cur_version && window.localStorage.getItem("vendor")) {
      //命中缓存
      vendor = window.localStorage.getItem("vendor");
      vendor_script.innerText = vendor;
      document.head.appendChild(vendor_script);
      document.head.appendChild(bundle_script);
    } else {
      //获取js代码
      var httpRequest = new XMLHttpRequest();
      httpRequest.onreadystatechange = function(){
        if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200 || httpRequest.status === 304) {
          vendor = httpRequest.responseText;
          vendor_script.innerText = vendor;
          document.head.appendChild(vendor_script);
          document.head.appendChild(bundle_script);
          //以当前vendor的src链接作为key用于版本控制
          window.localStorage.setItem("vendor_version", cur_version);
          //存储实际代码
          window.localStorage.setItem("vendor", vendor);
        }
        //should handle 500
      }
      httpRequest.open('GET', vendor_src, true);
      httpRequest.send(null);
    }
  } else {
    //不支持localstorage时的回退方案，直接将script标签添加到head
    vendor_script.src = vendor_script;
    document.head.appendChild(vendor_script);
    document.head.appendChild(bundle_script);
  }
script>
<link href="bundle.css" rel="stylesheet">
head>
<body>
  DEMO
body>
html>

代码没有什么高深的地方（毕竟水平有限，但是简单易懂有用的代码也挺好的），应该看完就知道大概了，可能你会疑惑：

为什么用了