15. webpack优化配置-babel缓存和资源缓存配置

开启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文件的命名
        }),
        ...
    ]
}

15. webpack优化配置-babel缓存和资源缓存配置

猜你喜欢