webpack+react+antd腳手架優(yōu)化的方法

2024-05-06 16:43:30

字體：大中小

供稿：網(wǎng)友

在之前的文章中了解了 webpack v4的特性，現(xiàn)在將知識(shí)用于實(shí)踐，對(duì)之前寫的一個(gè)react 腳手架進(jìn)行打包性能的優(yōu)化。

優(yōu)化類目

樣式分離
第三方資源分離
區(qū)分開發(fā)環(huán)境
熱更新
提取公共代碼

1. CSS分離

npm install extract-text-webpack-plugin -D

webpack.config.js

將css、less、sass文件單獨(dú)從打包文件中分離

+ let cssExtract = new ExtractTextWebpackPlugin({+ filename: 'css.css',+ allChunks: true+ });+ let sassExtract = new ExtractTextWebpackPlugin('sass.css')+ let lessExtract = new ExtractTextWebpackPlugin('less.css')

在webpack.config.js中單獨(dú)添加規(guī)則，

test：匹配處理文件的擴(kuò)展名的正則表達(dá)式
include/exclude手動(dòng)指定必須處理的文件夾或屏蔽不需要處理的文件夾

{ 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/},

然后運(yùn)行webpack命令時(shí)報(bào)錯(cuò)

compilation.mainTemplate.applyPluginsWaterfall is not a function

Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

研究得出結(jié)論：webpack升級(jí)到v4然而響應(yīng)的插件沒有升級(jí)的原故。

解決方法：安裝指定版本的依賴

"html-webpack-plugin": "^3.0.4""extract-text-webpack-plugin": "^4.0.0-beta.0"

resolve

指定extension之后可以不用在require或是import的時(shí)候加文件擴(kuò)展名,會(huì)依次嘗試添加擴(kuò)展名進(jìn)行匹配

resolve: { //引入模塊的時(shí)候，可以不用擴(kuò)展名 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í)行動(dòng)作，防止文件更新太快導(dǎo)致編譯頻率太高 poll: 1000 //通過不停的詢問文件是否改變來判斷文件是否發(fā)生變化，默認(rèn)每秒詢問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

在頁(yè)面上引入第三方資源庫(kù)，然后使用externals防止將某些 import 的包(package)打包到 bundle 中，而是在運(yùn)行時(shí)(runtime)再去從外部獲取這些擴(kuò)展依賴(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)

react,webpack,腳手架,antd

后來才發(fā)現(xiàn)是頁(yè)面上沒有引入資源。。。。（我一直以為會(huì)webpack自動(dòng)生成在頁(yè)面上....）

在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: { //引入模塊的時(shí)候，可以不用擴(kuò)展名 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)聽模式時(shí)，watchOptions才有意義 watchOptions: { ignored: /node_modules/, aggregateTimeout: 300, //監(jiān)聽到變化發(fā)生后等300ms再去執(zhí)行動(dòng)作，防止文件更新太快導(dǎo)致編譯頻率太高 poll: 1000 //通過不停的詢問文件是否改變來判斷文件是否發(fā)生變化，默認(rèn)每秒詢問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' //目標(biāo)地址，相對(duì)于output的path目錄 }]),/* new webpack.optimize.CommonsChunkPlugin({ name: 'common' // 指定公共 bundle 的名稱。 + })*/ new webpack.HotModuleReplacementPlugin(), // 熱替換插件 new webpack.NamedModulesPlugin() // 執(zhí)行熱替換時(shí)打印模塊名字 ]};

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.jsconst 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}) ]}

原腳手架地址

react,webpack,腳手架,antd