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文件的代碼捐川，您只寫了一層{}的代碼，如果里面再嵌套一層{}逸尖，那么編譯的時候會報錯古沥，錯誤原因是先執(zhí)行了px2rem-loader編輯瘸右，less-loader在后面，module.rules 里less-loader應該寫在px2rem-loader后面
5岩齿、資源內聯(lián)的意義
代碼層面：
- 頁面框架的初始化腳本
- 上報相關打點
- css內聯(lián)避免頁面閃動
請求層面：減少http網絡請求 - 小圖片或則字體內聯(lián)（url-loader）
html內聯(lián) - 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
開發(fā)環(huán)境開啟盹沈，線上環(huán)境關閉 - 線上排查問題的時候可以將 sourcemap 上傳到錯誤監(jiān)控系統(tǒng)
devtool常用屬性
eval: 使?用eval包裹模塊代碼
source map: 產?生.map?文件
cheap: 不不包含列列信息
inline: 將.map作為DataURI嵌?入龄章，不不單獨?生成.map?文件
module:包含loader的sourcemap
image.png
- 開發(fā)環(huán)境調試設置devtool為source-map能看到源代碼，方便排查定位問題
設置成cheap-source-map代碼出錯時只能定位到行的報錯信息 - 生產環(huán)境設置成source-map會生成把.js.map和js
- 生產環(huán)境設置成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（搖數(shù)優(yōu)化）
- production生產環(huán)境下默認tree shaking是打開的其它均是未開啟
概念:1 個模塊可能有多個?方法肃晚，只要其中的某個?方法使?用到了了菇用，則整個?文件都會被打到 bundle ?里里?面去，tree shaking 就是只把?用到的?方法打?入 bundle 陷揪，沒?用到的?方法會在 uglify 階段被擦除掉。
使?用:webpack 默認?支持杂穷，在 .babelrc ?里里設置 modules: false 即可 · production mode的情況下默認開啟
要求:必須是 ES6 的語法悍缠，CJS 的?方式不不?支持
Tree-shaking 原理理
利利?用 ES6 模塊的特點: ·只能作為模塊頂層的語句句出現(xiàn)
· import 的模塊名只能是字符串串常量量
· import binding 是 immutable的 代碼擦除: uglify 階段刪除?無?用代碼
