優化
1:優化圖片
使用 url-loader 優化, 將小圖片轉化成base64壓縮,防止小圖片太多請求次數太多。
1:下載 url-loader
npm install -D url-loader
2: 配置
在 webpack.prod.conf.js 文件夾中配置
module: {
rules: [{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'url-loader', // 優化小圖片過多造成請求數太多
options: {
limit: 8192, // 如果圖片小于 8192 bytes 就直接 base64 內置到模板,否則才拷貝
outputPath: 'img/'
}
}]
},
2:分離第三方包
打包后的bundle.js文件夾較大,所以每次加載的時候,請求比較慢,所以有必要在打包時將第三方包分離出來。使用CommonsChunkPlugin 插件進行配置。
在 webpack.prod.conf.js 文件夾中配置
1:引入webpack
const webpack = require('webpack')
2:將 entry 改成一個對象
entry: {
vendor: ['babel-polyfill', "axios", "marked", "react", "react-dom", "react-router-dom"], // 第三方文件
app: './src/main.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor", // 當加載 vendor 中的資源的時候,把這些資源都合并到 vendor.js 文件中
filename: "js/vendor.js",
minChunks: Infinity,
})
],
3:分離 css 文件并壓縮 css 文件
使用 extract-text-webpack-plugin 插件將css文件分離出來。為了使項目加載時候盡早優先加載css樣式,也為了解決js文件體積過大的問題
1: 下載 extract-text-webpack-plugin
npm install -D extract-text-webpack-plugin
2: 配置
在 webpack.prod.conf.js 文件夾中配置
1> 引入
const ExtractTextPlugin = require("extract-text-webpack-plugin")
2> 配置分離 css 文件
plugins: [
new ExtractTextPlugin("css/styles.css"), // 把抽離出來的 css 文件打包到 styles.css 文件中
],
module: {
rules: [ {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: {
loader: 'css-loader',
options: {
minimize: true
}
}
})
},
} ]
3> 配置壓縮css (直接配置 css-loader 屬性的選項)
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
//這個地方配置一個對象,添加一個屬性進行壓縮css文件
use: {
loader: 'css-loader',
options: {
minimize: true // 配置minimize 值為true,壓縮css 文件
}
}
})
},
4: 壓縮 js 文件
使用 uglifyjs-webpack-plugin 將js壓縮,減少打包后的 vendor.js , bundle.js 等js的文件大小
1: 下載 uglifyjs-webpack-plugin
npm install -D uglifyjs-webpack-plugin
2: 配置
在webpack.prod.conf.js 文件夾中配置
1> 引入
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
2> 配置
plugins: [
new UglifyJsPlugin(), // 壓縮 JavaScript
],
5:壓縮Html
為了減少打包后的文件體積,使性能更好,效率更高,提高加載速度,打包時有必要進行壓縮。
使用html-webpack-plugin 進行壓縮
1:下載 html-webpack-plugin
npm install -D html-webpack-plugin
2: 配置
在 webpack.prod.conf.js 文件中配置
1> 引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
2> 配置
plugins: [
new HtmlWebpackPlugin({
template: './index.html', // 把 index.html 也打包到 dist 目錄中
// 壓縮 html,默認 false 不壓縮
minify: {
collapseWhitespace: true, // 去除回車換行符以及多余空格
removeComments: true, // 刪除注釋
}
}),]
minify 是一個對象,其實還可以配置壓縮其它。感興趣的小伙伴可以去官網研究下
??? ??? 以上就是我做項目的時候使用的打包優化的方法,分享給小伙伴們,如果對你有幫助,給我加個關注,點個贊喲,?( ′???` )比心