webpack 如何压缩文件
本节我们学习如何压缩 webpack
中的文件。在实际应用中,为了缩小打包后包的体积,我们可能需要将 CSS 和 JS 文件进行压缩,这需要用到 webpack
中的不同插件来实现。
压缩 CSS
在 webpack
中要压缩 CSS 文件,需要用到 optimize-css-assets-webpack-plugin
插件,这个插件会在 webpack
构建过程中搜索 CSS ,并优化 CSS。
首先我们需要安装这个插件,命令如下所示:
npm install optimize-css-assets-webpack-plugin --save-dev
执行命令后,会发现插件成功添加到了 package.json
文件中的 devDependencies
依赖中。
这个插件在使用时可以接受以下选项:
assetNameRegExp
:一个正则表达式,指示应优化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin
实例导出的文件的文件名运行,而不是源 CSS 文件的文件名。默认为/\.css$/g
。cssProcessor
:用于优化 CSS 的 CSS 处理器,默认为cssnano
。这应该是一个遵循cssnano.process
接口的函数(接收 CSS 和options
参数并返回一个Promise)。cssProcessorOptions
:传递给cssProcessor
的选项,默认为{}
。canPrint
:一个布尔值,指示插件是否可以将消息打印到控制台,默认为true
。
示例:
然后我们可以在 webpack.config.js
配置文件中配置这个插件,注意一下,我们之前在学习插件的时候就讲到过,插件在使用之前需要先通过 require
引用。
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
entry:'./index.js',
},
output: {
path:__dirname + '/dist',
filename:'./bundle.js'
},
module:{
rules:[
{
test:/.css$/,
use:['style-loader','css-loader']
}]
},
mode: 'production',
plugins: [
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true },
normalizeUnicode: false }],
},
canPrint: true
})
]
}
压缩 JS
如果我们要在 webpack
中压缩 JS ,可以使用 uglifyjs-webpack-plugin
插件。uglifyjs-webpack-plugin
插件用来对 JS 文件进行压缩,减小 JS 文件的大小,加速加载速度。因为这个插件会拖慢 webpack
的编译速度,所以一般我们在开发时会将其关闭,部署的时候再将其打开。
在使用此插件时,同样需要先进行安装:
npm install uglifyjs-webpack-plugin --save-dev
uglifyjs-webpack-plugin
插件的选项有如下所示:
test
:测试匹配文件,默认值为/\.js(\?.*)?$/i
。include
:要包含的文件,默认值为undefined
。exclude
:要排除的文件。cache
:启用文件缓存。当 JS 没有发生变化则不压缩。parallel
:是否启用并行压缩。sourceMap
:是否启用sourceMap
。
示例:
uglifyjs-webpack-plugin
插件的使用如下所示:
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new UglifyJsPlugin({
test: /\.js(\?.*)?$/i, //测试匹配文件,
include: /\/index.js/, //包含哪些文件
excluce: /\/excludes/, //不包含哪些文件
chunkFilter: (chunk) => {
// `vendor` 模块不压缩
if (chunk.name === 'vendor') {
return false;
}
return true;
},
cache: true,
parallel: true,
sourceMap: true
})
]
}
转载自:https://segmentfault.com/a/1190000040360158