module: {
rules: [
{
test: /\.css/,
use: [
{
loader: MiniCssExtractPlugin.loader // 涉及到内容装转换
},
'css-loader'
]
}
]
},
plugins: [
// extract css into its own file
// Error contenthash not implemented with webpack > 4.3.0
// 1. yarn upgrade extract-text-webpack-plugin@next
// 2. 采用 mini-css-extract-plugin
new MiniCssExtractPlugin({
// 因为webpack4.3包含了contenthash这个关键字,所以ExtractTextPlugin中不能使用contenthash
// 使用md5:contenthash:hex:8代替contenthash
// github issue https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/765
filename: 'css/[name].[contenthash].css',
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
})
]
module.exports = {
mode: 'production',
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
mangle: {
safari10: true
},
// 清除生产环境的控制台输出
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
},
sourceMap: config.build.productionSourceMap,
cache: true,
parallel: true
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSAssetsPlugin()
]
}
}
图片资源
对于项目中的图片资源,我们主要从两方面进行优化:
对资源进行压缩
减少体积,我们使用对应的loader进行处理。使用
file-loader
来处理图片文件将一些图片转换为base64 uri
减少http请求时,就可以用
url-loader
进行处理CSS Sprites
当我们的项目中,使用了大量的svg-icon时,可以用
svg-sprite-loader
进行处理html模版
用
html-webpack-plugin
将index.html与打包后的进行关联,其实,html-webpack-plugin中还有提供输出配置minify:当mode为production时,
minify
配置生效CSS剥离与压缩
extract-text-webpack-plugin
(还不支持webpack的4.x版本)和mini-css-extract-plugin
是可以提取CSS到单独的文件中。JavaScript
webpack4.x中已经可以将压缩的插件放置在
minimizer
中了。用UglifyJsPlugin
进行JS代码压缩关于代码分离
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。 代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,果使用合理,会极大影响加载时间。
常用的代码分离方法有三种:
SplitChunksPlugin
去重和分离 chunk。入口起点
我们可以通过配置多个入口文件,从而进行代码分离
但是,这样做有两个缺点:
如果入口 chunk 之间包含一些重复的模块,那些重复模块都会被引入到各个 bundle 中。 这种方法不够灵活,并且不能将核心应用程序逻辑进行动态拆分代码。
防止重复
optimization
中的splitChunks
即可做到注意:splitChunks是webpack4.x的解决方案,webpack3.x是用CommonsChunkPlugin插件
webpack3.x
webpack4.x
更详细的配置内容:
splitChunks是拆包优化的重点,如果你的项目中包含 element-ui 等第三方组件(组件较大),建议单独拆包,如下所示:
动态导入
使用ECMAScript的
import()
, webpack 会自动处理使用该语法编写的模块。