webpack构建工具-第三天（性能优化）

缩小文件范围 Loader

• 优化loader配置

三个参数：test / include/ exclude
推荐使用：include

// 针对src目录下的文件
include: path.resolve(__dirname, "./src"),

优化resolve.modules配置 (寻找第三方模块)

resolve.modules用于配置webpack到哪些目录下寻找第三方模块，默认是：node_modules
寻找第三方模块，如果在当前目录找不到node_modules，就会一级一级往上找，直到找到node_modules为止

如果项目中的根目录安装第三方模块，可以用这个配置指定

resolve:{
	modules:[path.resolve(__dirname,'./node_modules')]
}

优化resolve.alias配置

resolve.alias配置通过别名来将原导入路径映射成一个新的导入路径

alias: {
"@": path.join(__dirname, "./pages")
}

优化resolve.extensions配置

当导入语句没有带文件后缀的时候，webpack会自动带上后缀，尝试寻找文件是否存在

默认值

extensions:['.js','.json','.jsx','.ts']

• 导入文件的时候，一定要带上后缀

externals配置优化cdn

把不常更新的第三方库文件，脱离webpack的打包，使打包速度更快，包体更小

module.export = {
	externals:{
		juqyer:'jQuery'
	}
}

使用静态资源路径publicPath(CDN)

当打包的时候，webpack会在静态文件路径前面添加publicPath的值

output:{
	publicPath:'//cdnUrl.com'
}

借助MiniCssExtractPlugin抽离css代码

如果不抽离的话，css会融合在js文件中，导致文件过大，下载效率慢

如果抽离css文件，可以做到css文件和js文件并行下载

npm install mini-css-extract-plugin -D

webpack.config.js配置

const miniCssExtractPlugin = require('mini-css-extract-plugin');

{
	test:/\.scss$/,
	use:[
		miniCssExtractPlugin.loader, // 去除style-loader，用miniCssExtractPlugin代替
		'css-loader',
		'postcss-loader',
		'sass-loader'
	]
}

plugins:[
	new miniCssExtractPlugin({
		filename:'css/[name]_[constenthash:6].css',
		chunkFilename:"[id].css"
	})
]

压缩css

• optimize-css-assets-webpack-plugin
• cssnano

npm install optimize-css-assets-webpack-plugin -D
npm install cssnano -D

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

new OptimizeCSSAssetsPlugin({
	cssProcessor: require("cssnano"), //引⼊入cssnano配置压缩选项
	cssProcessorOptions: {
		discardComments: { removeAll: true }
	}
})

压缩HTML

• html-webpack-plugin

new htmlWebpackPlugin({
	title: "京东商城",
	template: "./index.html",
	filename: "index.html",
	minify: {
		// 压缩HTML⽂文件
		removeComments: true, // 移除HTML中的注释
		collapseWhitespace: true, // 删除空⽩白符与换⾏行行符
		minifyCSS: true // 压缩内联css
	}
})

development vs Production模式区分打包