webpack学习笔记(六) 缓存

为何要使用缓存呢？单就功能来说，不用缓存也能达到一样的效果，使用缓存最大的目的实际上是为了 提升性能

为此咱们必需要确保 webpack 编译生成的文件能被客户端缓存，而且当文件发生变化后，客户端能获得新的文件

一、哈希命名

下面，咱们先来搭建一个小小的项目，一步一步说明如何在 webpack 中配置使用缓存

建立一个空文件夹 Demo，做为项目的根目录，而后在该目录中运行如下命令安装依赖

> # 建立 package.json 文件
> npm init -y
> # 安装 webpack
> npm install --save-dev webpack
> npm install --save-dev webpack-cli
> # 安装 lodash 模块
> npm install --save lodash

在根目录下建立 dist 和 src 文件夹，分别用于存放资源文件和打包以后的输出文件

并在 src 文件夹下建立 index.js 文件，该文件的做用是添加一个 div 元素做为 body 的子节点

import _ from 'lodash';

function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

let elem = component();
document.body.appendChild(elem);

以后，咱们在根目录下建立一个 webpack.config.js 文件，用于指定 webpack 的一些配置

经过 hash，咱们可使得每次打包生成的文件命名都是惟一的

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    }
};

二、使用 HtmlWebpackPlugin 插件

这里有一个问题，若是每次打包以后生成的文件命名都不同，那么咱们要怎么引用文件呢？

答案是使用 HtmlWebpackPlugin，这个插件会自动生成一个 HTML5 文件，动态添加每次编译后引用的资源

首先安装插件

> npm install --save-dev html-webpack-plugin

而后在 webpack.config.js 文件中进行配置

const path = require('path');
// 引入 HtmlWebpackPlugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        // 使用 HtmlWebpackPlugin 插件
        new HtmlWebpackPlugin()
    ]
};

三、使用 CleanWebpackPlugin 插件

另一个问题，若是通过屡次修改和打包，因为以前打包生成的文件也会残留下来，因此文件会越堆越多

要怎么解决呢？答案是使用 CleanWebpackPlugin，该插件能够在从新打包的时候，把没有用的文件自动清除

仍是先安装插件

> npm install --save-dev clean-webpack-plugin

而后在 webpack.config.js 文件中进行配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入 CleanWebpackPlugin 插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin(),
        // 使用 CleanWebpackPlugin 插件
        new CleanWebpackPlugin()
    ]
};

四、提取模板

有的时候，将第三方库提取到独立的 chunk 文件是比较推荐的作法

由于它们不多被修改，因此利用客户端的长效缓存机制，能够最大限度的减小客户端向服务器请求资源的次数

修改 webpack.config.js 文件以下

const path = require('path');
// 引入 webpack 内置插件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js',
        // 新增 vender 入口，指定第三方库
        vender: [
            'lodash'
        ]
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        // 将指定的模块分离到单独的文件
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ]
};

五、使用 NamedModulesPlugin / HashedModuleIdsPlugin 插件

至此，还有最后一个问题，假如咱们在 src 目录下添加一个文件 hello.js，文件内容以下

export function SayHello() {
    console.log('Hello World')
}

而后，咱们在 src 目录下的 index.js 文件中引用新建的文件，修改 index.js 文件以下

import _ from 'lodash';
import { SayHello } from './hello.js';

function component() {
    SayHello()
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

let elem = component();
document.body.appendChild(elem);

可是当咱们从新打包的时候，却发现以前打包 vender 生成的 bundle 文件的 hash 也发生了改变

这是由于 module.id 会基于默认的解析顺序进行增量，因此 vender 生成的 bundle 文件的 hash 也会所以变化

对于这种状况，webpack 提供两种解决方法

一是使用 NamedModulesPlugin（适合开发环境使用），二是使用 HashedModuleIdsPlugin（适合生产环境使用）

修改 webpack.config.js 文件以下

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js',
        vender: [
            'lodash'
        ]
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
        // 使用 HashedModuleIdsPlugin 插件
        new webpack.HashedModuleIdsPlugin(),
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ]
};

【 更新：webpack.optimize.CommonsChunkPlugin 已弃用，请使用 config.optimization.splitChunks 】

对于报错信息，不针对上面的例子，下面是一个比较通用的写法

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new webpack.HashedModuleIdsPlugin(),
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',  // 可选值有三个，initial（入口）、async（异步）和 all
            minSize: 30000, // 最小尺寸
            minChunks: 1,   // 最小引用次数
            maxAsyncRequests: 5,   // 最大请求异步 chunk 的次数
            maxInitialRequests: 3, // 最大请求入口 chunk 的次数
            cacheGroups: {
                vendor: { // 提取第三方库
                    test: /[\\/]node_modules[\\/]/, // 根据需求修改
                    name: 'vendor',
                },
                common: { // 提取公共文件
                    test: /[\\/]src[\\/]js[\\/]/, // 根据需求修改
                    name: 'common'
                }
            }
        }
    }
};

【 阅读更多 webpack 系列文章，请看 webpack学习笔记 】