-
开启babel缓存,在第二次打包时,打包构建速度更快
-
在webpack配置文件webpack.config.js中开启babel缓存
module.exports = { ... module: { rules: [ ... //js兼容性处理 { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ ... ], //开启babelh缓存,第二次构建时,会读取之前的缓存 cacheDirectory: true } } ] } }
-
开启资源缓存,让上线运行缓存更好使用
方式一:给所有资源的名称一个hash值,当文件发生更改时,会重新生成一个hash值,从而改变资源的命名。
hash值是webpack构建时生成的唯一值。
当任一文件的内容发生改变,所有的资源将会重新命名,会导致所有资源的缓存失效。module.exports = { ... output: { filename: 'built[hash:8].js', //js文件的命名 path: path.resolve(__dirname, 'bulid'), }, module: { rules: [ ... //处理css中的图片文件 { test: /\.(png|gif|jpe?g)$/, loader: "url-loader", options: { limit: 8 * 1024, outputPath: 'imgs/', name: '[name][hash:8].[ext]',//图片文件的命名 } }, ... ] }, plugins: [ ... new MiniCssExtractPlugin({ filename: 'css/built[hash:8].css', //css文件的命名 }), ... ] }
方式二:使用chunkhash:根据chunk生成的hash值。如果打包来源于同一个chunk,那么hash值就一样。
- 也会出现当一个文件发生更改,js和css文件命名都发生更改。因为css是被js引入的所以是同一个chunk。
- 将方式一的hash改为chunkhash即可。
- 注意:图片不能使用chunkhash
module.exports = { ... output: { filename: 'built[chunkhash:8].js',//js文件的命名 path: path.resolve(__dirname, 'bulid'), }, module: { rules: [ ... //处理css中的图片文件 { test: /\.(png|gif|jpe?g)$/, loader: "url-loader", options: { limit: 8 * 1024, outputPath: 'imgs/', name: '[name][hash].[ext]',//图片文件的命名,图片无法用chunkhash } }, ... ] }, plugins: [ ... new MiniCssExtractPlugin({ filename: 'css/built[chunkhash:8].css', //css文件的命名 }), ... ] }
方式三:使用contenthash,根据自身文件内容生成的hash值进行命名。
- 这时就可以实现哪个文件内容改变更改哪个文件的命名。
module.exports = { ... output: { filename: 'built[contenthash:8].js', //js文件的命名 path: path.resolve(__dirname, 'bulid'), }, module: { rules: [ ... //处理css中的图片文件 { test: /\.(png|gif|jpe?g)$/, loader: "url-loader", options: { limit: 8 * 1024, outputPath: 'imgs/', name: '[name][contenthash:8].[ext]',//图片文件的命名 } }, ... ] }, plugins: [ ... new MiniCssExtractPlugin({ filename: 'css/built[contenthash:8].css', //css文件的命名 }), ... ] }