1、babel缓存

cacheDirectory:true 第二次构建速度更快

2、文件缓存

1、准备

  1. const express = require('express');
  3. const app = express();
  4. // express.static向外暴露静态资源
  5. // maxAge 资源缓存的最大时间，单位ms
  6. //服务端代码构建静态文件，会缓存一个小时
  7. app.use(express.static('build', { maxAge: 1000 * 3600 }));
  9. app.listen(3000);
  11. //node server.js
  1. html,
  2. body {
  3.   margin: 0;
  4.   padding: 0;
  5.   height: 100%;
  6.   background-color: deeppink;
  7. }
import '../css/index.css'

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

// eslint-disable-next-line
console.log(sum(1, 2, 3, 4));

2、webpack.config.js

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.css$/,
            use: [...commonCssLoader]
          },
          {
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader']
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: { version: 3 },
                    targets: {
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ],
              // 开启babel缓存
              // 第二次构建时，会读取之前的缓存
              cacheDirectory: true
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader'
          },
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
      }
    })
  ],
  mode: 'production',
  devtool: 'source-map'
};

先webpack打包，再运行node server.js

3、结果

image.png

1、解决

版本号增加hash值，如果打包时文件名变，会重新加载。
hash：每次webpack构建时会生成一个唯一的hash值
问题：因为js和css同时使用一个hash值。如果重新打包，会重新换窜。（如果只改动一个文件情况，不适合）。
chunkhash：根据chunk生成的hash值，如果打包来源同一个chunk，那么hash值就一样
问题：css是js引入，依旧同属一个hash值
contenthash：根绝文件的内容生成hash值，不同文件hash值一定不一样，推荐。
image.png

2、打包结果

如果改变js内容，
image.png