React多頁面應用3(webpack效能提升,包括打包效能、提取公共包等)
微信公眾號首發！這邊文章排版可能不好，請關注公眾號，檢視歷史訊息！
本教程總共7篇,每日更新一篇,請關注我們!你可以進入歷史訊息檢視以往文章,也敬請期待我們的新文章!
1.React多頁面應用1(webpack開發環境搭建,包括Babel、熱更新等) ----2017.12.28
2.React多頁面應用2(處理CSS及圖片,引入postCSS及圖片處理等)----2017.12.29
3.React多頁面應用3(webpack效能提升,包括打包效能、提取公共包等)----2017.12.30
4.React多頁面應用4(webpack自動化生成多入口頁面)----2017.12.31
5.React多頁面應用5(webpack生產環境配置,包括壓縮js程式碼,圖片轉碼等)----2018.01.01
6.React多頁面應用6(gulp自動化釋出到多個環境,生成版本號,打包成zip等)----2018.01.02
7.React多頁面應用7(引入eslint程式碼檢查)----2018.01.03
開發環境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
當我們專案頁面越來越多,依賴越來越多,打包時間會越來越長,那麼我們如優化呢?
1.打包效能問題 (涉及很多因素,我們慢慢來)
引入依賴
npm i -D cache-loader
修改 webpack.dev.conf.js
const webpack =require('webpack');//引入webpack
const opn =require('opn');//開啟瀏覽器
const merge =require('webpack-merge');//webpack配置檔案合併
const path =require("path");
const baseWebpackConfig =require("./webpack.base.conf");//基礎配置
const webpackFile =require("./webpack.file.conf");//一些路徑配置
let config = merge(baseWebpackConfig, {
output: {
path: path.resolve(webpackFile.devDirectory),
filename:'js/[name].js',
chunkFilename:"js/[name]-[id].js",
publicPath:''
},
plugins: [
/*設定開發環境*/
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
}
}),
/*設定熱更新*/
new webpack.HotModuleReplacementPlugin(),
],
module: {
rules: [
{
test:/\.(js|jsx)$/,
use: [
'cache-loader',
'babel-loader',
],
include: [
path.resolve(__dirname, "../../app"),
path.resolve(__dirname, "../../entryBuild")
],
exclude: [
path.resolve(__dirname, "../../node_modules")
],
},
{
test:/\.(css|pcss)$/,
loader:'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap',
exclude:/node_modules/
},
{
test:/\.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
loader:'file-loader?name=[name].[ext]&outputPath=' +webpackFile.resource +'/'
}
]
},
/*設定api轉發*/
devServer: {
host:'0.0.0.0',
port:8080,
hot:true,
inline:true,
contentBase: path.resolve(webpackFile.devDirectory),
historyApiFallback:true,
disableHostCheck:true,
proxy: [
{
context: ['/api/**', '/u/**'],
target:'http://192.168.12.100:8080/',
secure:false
}
],
/*開啟瀏覽器 並開啟本專案網址*/
after() {
opn('http://localhost:' +this.port);
}
}
});
module.exports = config;
新增了如下程式碼
use: [
'cache-loader',
'babel-loader',
],
我們看下效果
沒有引入 cache-loader
打包時間
引入 cache-loader
打包時間
減少了3秒,再頁面相當多的時候,優化是很明顯的!
2.提取公共包
首先我們看下 首頁 和 商城頁 相同部分很不同部分
幾乎一模一樣,好! 我們提取公共部分,放入一個元件中
我們在 app-> component -> common 目錄下 新建 Seconds.jsx 公共元件
import Reactfrom 'react';
class Secondsextends React.Component {
constructor(props) {
super(props);
this.state = {seconds:0};
}
tick() {
this.setState(prevState => ({
seconds: prevState.seconds +1
}));
}
componentDidMount() {
this.interval =setInterval(() =>this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
這是{this.props.title}
Seconds: {this.state.seconds}
);
}
}
export default Seconds;
改造 首頁
import Reactfrom 'react';
import '../../public/css/index.pcss'
import Secondsfrom '../common/Seconds'
const Index = () =>
;
export default Index;
改造商城頁
import Reactfrom 'react';
import '../../public/css/shop.pcss'
import Secondsfrom '../common/Seconds'
const Index = () =>
;
export default Index;
npm run dev 執行看下 是否正常
一切正常
3.開始提取
目標是:
react react-dom 我們打包成 vendor.js 因為他們是第三方部,幾乎不會變,除非你升級
元件的公共部分 我們打包成 common.js
元件獨立的業務程式碼我們打包在對應的js檔案中 如 index.js 或 shop.js
改造
config -> webpack -> webpack.base.conf.js
const json =require('../../package.json');//引進package.json
const newEntry = {
'index':'./entryBuild/index.js',
'shop':'./entryBuild/shop.js',
};
newEntry.vendor = Object.keys(json.dependencies); //把 package.json dependencies欄位的值放進 vendor中
let config = {
entry: newEntry,
resolve: {
extensions: [".js", ".json", ".jsx", ".css", ".pcss"],
}
};
module.exports = config;
改造
config -> webpack -> webpack.dev.conf.js
const webpack =require('webpack');//引入webpack
const opn =require('opn');//開啟瀏覽器
const merge =require('webpack-merge');//webpack配置檔案合併
const path =require("path");
const baseWebpackConfig =require("./webpack.base.conf");//基礎配置
const webpackFile =require("./webpack.file.conf");//一些路徑配置
let config = merge(baseWebpackConfig, {
output: {
path: path.resolve(webpackFile.devDirectory),
filename:'js/[name].js',
chunkFilename:"js/[name]-[id].js",
publicPath:''
},
plugins: [
/*設定開發環境*/
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
}
}),
/*設定熱更新*/
new webpack.HotModuleReplacementPlugin(),
/* common 業務公共程式碼，vendor引入第三方 */
new webpack.optimize.CommonsChunkPlugin({
name: ["common", "vendor"],
}),
/* 防止 vendor hash 變化 */
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name:'manifest',
chunks: ['vendor']
}),
],
module: {
rules: [
{
test:/\.(js|jsx)$/,
use: [
'cache-loader',
'babel-loader',
],
include: [
path.resolve(__dirname, "../../app"),
path.resolve(__dirname, "../../entryBuild")
],
exclude: [
path.resolve(__dirname, "../../node_modules")
],
},
{
test:/\.(css|pcss)$/,
loader:'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap',
exclude:/node_modules/
},
{
test:/\.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
loader:'file-loader?name=[name].[ext]&outputPath=' +webpackFile.resource +'/'
}
]
},
/*設定api轉發*/
devServer: {
host:'0.0.0.0',
port:8080,
hot:true,
inline:true,
contentBase: path.resolve(webpackFile.devDirectory),
historyApiFallback:true,
disableHostCheck:true,
proxy: [
{
context: ['/api/**', '/u/**'],
target:'http://192.168.12.100:8080/',
secure:false
}
],
/*開啟瀏覽器 並開啟本專案網址*/
after() {
opn('http://localhost:' +this.port);
}
}
});
module.exports = config;
新增了如下程式碼
/*設定熱更新*/
new webpack.HotModuleReplacementPlugin(),
/* common 業務公共程式碼，vendor引入第三方 */
new webpack.optimize.CommonsChunkPlugin({
name: ["common", "vendor"],
}),
/* 防止 vendor hash 變化 */
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name:'manifest',
chunks: ['vendor']
}),
改造 index.html
react1
新增了如下程式碼
注:順序不能變
改造 shop.html
react1
注:順序不能變
發現沒有 其實 index.html 和 shop.html 兩個頁面 很像 很像 是不是? 我們會再後面自動化生成頁面中 來解決這個問題,就不用手動去新建了!
npm run dev 看下效果
沒提取之前
提取之後
一切正常
本文完
禁止擅自轉載,如需轉載請在公眾號中留言聯絡我們!
感謝童鞋們支援!
歡迎童鞋們留言!
相關文章
- webpack如何打包多頁面應用(mpa)Web
- webpack4 + react 搭建多頁面應用WebReact
- webpack 打包多頁面Web
- React多頁面應用8(webpack4 gulp自動化釋出到多個環境,生成版本號,打包成zip等)ReactWeb
- webpack4打包vue前端多頁面專案WebVue前端
- 關於Webpack5 搭建 React 多頁面應用介紹WebReact
- webpack 構建多頁面應用——初探Web
- webpack+react+antd單頁面應用例項WebReact
- 【效能優化實踐】優化打包策略提升頁面載入速度優化
- webpack打包效能優化之路Web優化
- 多頁應用增量更新靜態資源Webpack打包方案Web
- webpack4+react多頁面架構WebReact架構
- webpack4多頁面打包腳手架配置Web
- Webpack 提取公共代 CommonsChunkPluginWebPlugin
- Android 多包名打包應用Android
- webpack+react多頁面開發架構WebReact架構
- React+Webpack效能優化ReactWeb優化
- Webpack + Vue 多頁面專案升級 Webpack 4 以及打包優化WebVue優化
- 單頁面應用和多頁面應用
- 提升現代web app中的頁面效能WebAPP
- React 應用中的效能隱患 —— 神奇的多型React多型
- 【譯】React 應用效能調優React
- webpack + vuecli多頁面打包基於（vue-template-admin）修改WebVue
- React多頁面應用腳手架-v1.3.0React
- 使用webpack構建多頁應用Web
- webpack 搭建vue多單頁應用WebVue
- 使用 preloadRouteComponents 提升 Nuxt 應用的效能UX
- 用PerformanceTiming來檢測頁面效能ORM
- 前端頁面效能前端
- 使用 React.js 的漸進式 Web 應用程式：第 2 部分 – 頁面載入效能ReactJSWeb
- Webpack多頁應用HMR卡住問題Web
- webpack+react多頁面開發(二)-終極架構WebReact架構
- webpack多頁面實踐Web
- 如何提高你的 React 應用的效能React
- 我對請求做了個效能小最佳化，提升了50%的頁面效能
- [譯] 高效能 React：3 個新工具加速你的應用React
- 頁面渲染：效能分析
- 5分鐘掌握 webpack 多頁應用配置Web
- 前端：你要懂的單頁面應用和多頁面應用前端