webpack+react+antd腳手架優(yōu)化的方法
更新時間：2018年04月02日 11:20:18 作者：wallaceyuan
本篇文章主要介紹了webpack+react+antd腳手架優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在之前的文章中了解了webpack v4的特性，現(xiàn)在將知識用于實踐，對之前寫的一個react腳手架進行打包性能的優(yōu)化。
優(yōu)化類目
- 樣式分離
- 第三方資源分離
- 區(qū)分開發(fā)環(huán)境
- 熱更新
- 提取公共代碼
1. CSS分離
npm install extract-text-webpack-plugin -D
webpack.config.js
將css、less、sass文件單獨從打包文件中分離
+ let cssExtract = new ExtractTextWebpackPlugin({
+ filename: 'css.css',
+ allChunks: true
+ });
+ let sassExtract = new ExtractTextWebpackPlugin('sass.css')
+ let lessExtract = new ExtractTextWebpackPlugin('less.css')
在webpack.config.js中單獨添加規(guī)則，
- test：匹配處理文件的擴展名的正則表達式
- include/exclude手動指定必須處理的文件夾或屏蔽不需要處理的文件夾
{
test: /\.css$/,
use: cssExtract.extract({
fallback: "style-loader",
use: ['css-loader?minimize','postcss-loader'],
publicPath: "/dist"
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
{
test: /\.scss$/,
use: sassExtract.extract({
fallback: "style-loader",
use: ["css-loader?minimize","sass-loader"],
publicPath: "/dist"
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
{
test: /\.less$/,
loader: lessExtract.extract({
use: ["css-loader?minimize", "less-loader"]
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
然后運行webpack命令時報錯
compilation.mainTemplate.applyPluginsWaterfall is not a function
Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
研究得出結論：webpack升級到v4然而響應的插件沒有升級的原故。
解決方法：安裝指定版本的依賴
"html-webpack-plugin": "^3.0.4" "extract-text-webpack-plugin": "^4.0.0-beta.0"
resolve
指定extension之后可以不用在require或是import的時候加文件擴展名,會依次嘗試添加擴展名進行匹配
resolve: {
//引入模塊的時候，可以不用擴展名
extensions: [".js", ".less", ".json"],
alias: {//別名
"bootstrap": "bootstrap/dist/css/bootstrap.css"
}
}
監(jiān)聽文件修改
webpack模式下使用，webpack-dev-server模式不用，可以將watch改為false
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300, //監(jiān)聽到變化發(fā)生后等300ms再去執(zhí)行動作，防止文件更新太快導致編譯頻率太高
poll: 1000 //通過不停的詢問文件是否改變來判斷文件是否發(fā)生變化，默認每秒詢問1000次
}
提取公共代碼
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: "initial",
minChunks: 2,
maxInitialRequests: 5, // The default limit is too small to showcase the effect
minSize: 0 // This is example is too small to create commons chunks
},
vendor: {
test: /node_modules/,
chunks: "initial",
name: "vendor",
priority: 10,
enforce: true
}
}
}
}
分離react react-dom ant公共代碼
方法一：externals
在頁面上引入第三方資源庫，然后使用externals防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。
<script src="https://cdn.bootcss.com/react/16.4.0-alpha.0911da3/cjs/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/cjs/react-dom-server.browser.production.min.js"></script>
externals: { 'react': 'React', 'react-dom': 'ReactDOM', // 提出ant design的公共資源, }
方法二：DLL
DLL在上篇文章中寫過，但是打包后一直出現(xiàn)
后來才發(fā)現(xiàn)是頁面上沒有引入資源。。。。（我一直以為會webpack自動生成在頁面上....）
在index.html文件中引入
<script src="./vendor/react.dll.js"></script>
分離成功！上代碼
webpack.base.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')
let cssExtract = new ExtractTextWebpackPlugin({
filename: 'css.css',
allChunks: true
});
let sassExtract = new ExtractTextWebpackPlugin('sass.css')
let lessExtract = new ExtractTextWebpackPlugin('less.css')
module.exports = {
entry:'./src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.[hash:8].js',
publicPath: ''
},
resolve: {
//引入模塊的時候，可以不用擴展名
extensions: [".js", ".less", ".json"],
alias: {//別名
"bootstrap": "bootstrap/dist/css/bootstrap.css"
},
modules: [path.resolve(__dirname, 'node_modules')]
},
/* externals: {
'react': 'React',
'react-dom': 'ReactDOM',
// 提出ant design的公共資源
//'antd': 'antd',
},*/
devtool: 'source-map',
devServer: {
contentBase:path.resolve(__dirname,'dist'),
publicPath: '/',
port: 8080,
hot:true,
compress:true,
historyApiFallback: true,
inline: true
},
watch: false, //只有在開啟監(jiān)聽模式時，watchOptions才有意義
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300, //監(jiān)聽到變化發(fā)生后等300ms再去執(zhí)行動作，防止文件更新太快導致編譯頻率太高
poll: 1000 //通過不停的詢問文件是否改變來判斷文件是否發(fā)生變化，默認每秒詢問1000次
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: "initial",
minChunks: 2,
maxInitialRequests: 5, // The default limit is too small to showcase the effect
minSize: 0 // This is example is too small to create commons chunks
},
vendor: {
test: /node_modules/,
chunks: "initial",
name: "vendor",
priority: 10,
enforce: true
}
}
}
},
module: {
rules:[
{
test: /\.js$/,
use: {
loader:'babel-loader',
options: {
presets: ['env','es2015', 'react'],
}
},
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
{
test: /\.css$/,
use: cssExtract.extract({
fallback: "style-loader",
use: ['css-loader?minimize','postcss-loader'],
publicPath: "/dist"
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
{
test: /\.scss$/,
use: sassExtract.extract({
fallback: "style-loader",
use: ["css-loader?minimize","sass-loader"],
publicPath: "/dist"
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
{
test: /\.less$/,
loader: lessExtract.extract({
use: ["css-loader?minimize", "less-loader"]
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
{
test: /\.(html|htm)/,
use: 'html-withimg-loader'
},
{
test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)/,
use: {
loader:'url-loader',
options:{
limit: 5 * 1024,
//指定拷貝文件的輸出目錄
outputPath: 'images/'
}
}
}
]
},
plugins: [
//定義環(huán)境變量
new webpack.DefinePlugin({
__development__: JSON.stringify(process.env.NODE_ENV)
}),
new CleanWebpackPlugin(['dist']),
cssExtract,
lessExtract,
sassExtract,
new HtmlWebpackPlugin({
title: 'React Biolerplate by YuanYuan',
template: './src/index.html',
filename: `index.html`,
hash: true
}),
new webpack.DllReferencePlugin({
manifest: path.join(__dirname, 'vendor', 'react.manifest.json')
}),
new CopyWebpackPlugin([{
from: path.join(__dirname,'vendor'),//靜態(tài)資源目錄源地址
to:'./vendor' //目標地址，相對于output的path目錄
}]),
/* new webpack.optimize.CommonsChunkPlugin({
name: 'common' // 指定公共 bundle 的名稱。
+ })*/
new webpack.HotModuleReplacementPlugin(), // 熱替換插件
new webpack.NamedModulesPlugin() // 執(zhí)行熱替換時打印模塊名字
]
};
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');//用來合并配置文件
const base = require('./webpack.base');
let other = '';
//console.log(process.env.NODE_ENV )
if (process.env.NODE_ENV == 'development') {
other = require('./webpack.dev.config');
} else {
other = require('./webpack.prod.config');
}
//console.log(merge(base, other));
module.exports = merge(base, other);
webpack.prod.config.js
const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
output: {
filename: 'bundle.min.js',
},
plugins: [
new UglifyJSPlugin({sourceMap: true})
]
}
打包速度優(yōu)化，打包文件細化，改造成功~
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
react使用css module無法重寫bootstrap樣式問題及解決
這篇文章主要介紹了react使用css module無法重寫bootstrap樣式問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
React使用context進行跨級組件數(shù)據(jù)傳遞
這篇文章給大家介紹了React使用context進行跨級組件數(shù)據(jù)傳遞的方法步驟,文中通過代碼示例給大家介紹的非常詳細,對大家學習React context組件數(shù)據(jù)傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來學習吧2024-01-01
這篇文章主要介紹了如何在react項目中做公共配置文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
React使用Canvas繪制大數(shù)據(jù)表格的實例代碼
之前一直想用Canvas做表格渲染的,最近發(fā)現(xiàn)了一個很不錯的Canvas繪圖框架Leafer,api很友好就試著寫了一下,文中有詳細的代碼示例供大家參考,感興趣的小伙伴可以自己動手試試2023-09-09
react實現(xiàn)動態(tài)增減表單項的示例代碼
在做項目的時候,甲方給的信息有限,網(wǎng)頁的備案信息寫成固定的,之后驗收的時候,甲方要求把這個備案信息寫成動態(tài)的,可以自增減,下面通過實例代碼給大家介紹react實現(xiàn)動態(tài)增減表單項的示例,感興趣的朋友跟隨小編一起看看吧2024-05-05
React-Native之截圖組件react-native-view-shot的介紹與使用小結
這篇文章主要介紹了React-Native之截圖組件react-native-view-shot的介紹與使用小結,需本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，要的朋友可以參考下2021-08-08
React需要自己開發(fā)支持插槽功能，原理：父組件組件中寫入的HTML，可以傳入子組件的props中，這篇文章主要介紹了React從插槽、路由、redux的詳細過程,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了react-native中路由頁面的跳轉與傳參,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
使用useMutation和React Query發(fā)布數(shù)據(jù)demo
這篇文章主要為大家介紹了使用useMutation和React Query發(fā)布數(shù)據(jù)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要跟大家介紹了關于React中事件處理的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習React具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-07-07