1、HTML、CSS和JS代码压缩
- JS文件的压缩
webpack4内置了uglifyjs-webpack-plugin该压缩插件 - CSS文件的压缩
使用optimize-css-assets-webpack-plugin插件
同时使用cssnano
cnpm i optimize-css-assets-webpack-plugin -D
cnpm i cssnano -D
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano')
})
- html压缩
- cnpm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html'),
filename: 'index.html',
chunks: ['index'],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
})
2、清理构建目录
- 通过npm scripts清理构建目录
rm -rf ./dist && webpack 或
rimraf ./dist && webpack - 使用clean-webpack-plugin插件，默认会删除output指定的输出目录
cnpm i clean-webpack-plugin -D
plugins: [
new CleanWebpackPlugin()
]
3、PostCSS插件autoprefixer自动补全CSS前缀
image.png
CSS3属性兼容性查询
- cnpm i postcss-loader autoprefixer -D 安装依赖
{
test: /.less$/,
use: [
// 'style-loader', // 和miniCssExtractPlugin.loader互斥
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')({
browsers: ["last 2 version", "> 1%", "iOS 7"]
})
]
}
}
]
},
4、移动端CSS px自动转rem
W3C对rem的定义：font-size of the root element
- cnpm i px2rem-loader -D 安装依赖
- cnpm i lib-flexible -S 安装依赖
页面渲染时计算根元素的font-size值 - 可以使用手淘的lib-flexible库
{
test: /.less$/,
use: [
// 'style-loader', // 和miniCssExtractPlugin.loader互斥
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')({
browsers: ["last 2 version", "> 1%", "iOS 7"]
})
]
}
},
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 8
}
},
'less-loader'
]
},
px转rem的demo有一个问题，search.less文件的代码，您只写了一层{}的代码，如果里面再嵌套一层{}，那么编译的时候会报错，错误原因是先执行了px2rem-loader编辑，less-loader在后面，module.rules 里less-loader应该写在px2rem-loader后面
5、资源内联的意义
代码层面：
- 页面框架的初始化脚本
- 上报相关打点
- css内联避免页面闪动
请求层面：减少http网络请求 - 小图片或则字体内联（url-loader）
html内联 - cnpm i raw-loader@0.5.1 -D
添加以下代码会报错
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
${ require('raw-loader!./meta.html') }
<script>
${ require('raw-loader!babel-loader!../node_modules/_lib-flexible@0.3.2@lib-flexible/fiexible.js') }
</script>
</head>
5、多页面应用打包通用方案
- cnpm i glob -D
const glob = require('glob');
const setMPA = () => {
const entry = {};
const htmlWebpackPlugins = [];
const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));
Object.keys(entryFiles)
.map((index) => {
const entryFile = entryFiles[index];
// '/Users/cpselvis/my-project/src/index/index.js'
const match = entryFile.match(/src\/(.*)\/index\.js/);
const pageName = match && match[1];
entry[pageName] = entryFile;
htmlWebpackPlugins.push(
new HtmlWebpackPlugin({
inlineSource: '.css$',
template: path.join(__dirname, `src/${pageName}/index.html`),
filename: `${pageName}.html`,
chunks: ['vendors', pageName],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
})
);
});
return {
entry,
htmlWebpackPlugins
}
}
const { entry, htmlWebpackPlugins } = setMPA();
module.exports = {
entry: entry,
plugins: [
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano')
}),
new CleanWebpackPlugin()
].concat(htmlWebpackPlugins)
6、使用source map
作用：通过source map定位到源码
- source map科普⽂文:http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
开发环境开启，线上环境关闭 - 线上排查问题的时候可以将 sourcemap 上传到错误监控系统
devtool常用属性
eval: 使⽤用eval包裹模块代码
source map: 产⽣生.map⽂文件
cheap: 不不包含列列信息
inline: 将.map作为DataURI嵌⼊入，不不单独⽣生成.map⽂文件
module:包含loader的sourcemap
image.png
- 开发环境调试设置devtool为source-map能看到源代码，方便排查定位问题
设置成cheap-source-map代码出错时只能定位到行的报错信息 - 生产环境设置成source-map会生成把.js.map和js
- 生产环境设置成inline-source-map会把.js.map和js合并
7、提取公共资源
- cnpm i html-webpack-externals-plugin -D 安装依赖
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
plugins: [
// 引入CDN，缩小打包体积
new HtmlWebpackExternalsPlugin({
externals: [
{
module: 'react',
entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
global: 'React',
},
{
module: 'react-dom',
entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
global: 'ReactDOM',
}
],
})
]
<body>
<div id="root"></div>
<script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react.min.js"></script>
<script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react-dom.min.js"></script>
</body>
</html>
- 提取公共资源
htmlWebpackPlugins.push(
new HtmlWebpackPlugin({
// 需要设置提取公共资源指向vendors位置
chunks: ['vendors', pageName],
inject: true,
})
);
optimization: {
splitChunks: {
// 公共资源最小为minSize才可提取
minSize: 0,
cacheGroups: {
commons: {
// 提取文件夹名
name: 'commons',
chunks: 'all',
// 至少minChunks处使用才可提取
minChunks: 2
}
}
}
}
8、tree shaking（摇数优化）
- production生产环境下默认tree shaking是打开的其它均是未开启
概念:1 个模块可能有多个⽅方法，只要其中的某个⽅方法使⽤用到了了，则整个⽂文件都会被打到 bundle ⾥里里⾯面去，tree shaking 就是只把⽤用到的⽅方法打⼊入 bundle ，没⽤用到的⽅方法会在 uglify 阶段被擦除掉。
使⽤用:webpack 默认⽀支持，在 .babelrc ⾥里里设置 modules: false 即可 · production mode的情况下默认开启
要求:必须是 ES6 的语法，CJS 的⽅方式不不⽀支持
Tree-shaking 原理理
利利⽤用 ES6 模块的特点: ·只能作为模块顶层的语句句出现
· import 的模块名只能是字符串串常量量
· import binding 是 immutable的 代码擦除: uglify 阶段删除⽆无⽤用代码
