搭建Typescript+React項目模板(4) --- 項目打包

時間 2019-11-07

標籤搭建 typescript+react typescript react 項目模板打包欄目 React 简体版

原文原文鏈接

項目地址

前言

通過前面的初始化，提高開發體驗和集成了一堆工具，調整了項目結構等等以後，咱們是時候考慮進行項目打包了。在這篇博客中，咱們不考慮開發環境和生產環境的配置分別，咱們只看打包須要進行的配置項，因此咱們須要作的以下: 0. 添加打包路徑工具git

添加打包命令
進行css和js分離
修改html-webpack-plugin配置項
添加react-loadable和react-router,進行代碼分離和按需加載
添加optimization,進行第三方庫代碼分離
進行代碼壓縮
關於externals

添加打包命令

咱們先去webpack.config.js中觀察一下output這個配置項: es6

該配置項指定了打包路徑和打包後的js文件名，在 webpack的配置項中， output是必須有的。接着咱們去到 package.json中在 script中添加打包命令 build，該命令引用咱們的 webpack.config.js配置文件:

以後試試運行 npm run build，會發現已經將項目打包出來了:

添加打包路徑工具

在上一步中，咱們已經知道打包出來的文件位於根目錄下的dist文件夾中，因此這個路徑工具的添加指向dist文件夾：咱們去到build/utils.js文件中，添加以下代碼: github

之後指定打包文件存放路徑的時候就能夠直接使用這個工具進行指定。

分離css文件

在上面打包的結果中，咱們會發現只有一個app.js文件，而實際上咱們是有寫css樣式的，可是如今的卻並無這個css文件，這是由於webpack將全部的資源(包含js, css等等)都當作是chunk，而後一塊兒打包進一個文件中，這樣會致使打包出來的js文件體積巨大，從而拖累頁面的加載速度。web

在webpack 4+版本中，咱們可使用mini-css-extract-plugin進行css代碼的分離，因此首先安裝它npm install -D mini-css-extract-plugin。
而後咱們到build/plugins.js中添加這個插件：
最後須要注意，以前在提高開發體驗這一章中有提到過一點，style-loader用於將css-loader編譯出來的代碼轉爲js代碼並寫入js文件中，因此在這裏，咱們須要用mini-css-extract-plugin中的loader去替換掉style-loader，讓它寫入單獨的css文件而不是js文件中: 咱們去到build/rules/styleRules.js中，將本來的style-loader全都替換成mini-css-extract-plugin的loader(這一步能夠進行開發環境和生產環境的區分，在文章中不進行區分):
通過上面的步驟，咱們能夠打包進行測試: 運行npm run build能夠發現打包結果中css文件已經進行了分離:

而在打包出來的index.html中也能夠發現這個css文件被引入了:
最後咱們再在打包路徑中將打包出來的js文件用js文件夾包裹起來便可:

修改`html-webpack-plugin`配置項

這一步主要用於壓縮打包出來的index.html文件，可是單頁面應用的話html內容其實很少，因此作不作也差很少，在本文章中也只是作個介紹:npm

首先在html-webpack-plugin中利用的是html-minifier來作壓縮工做的，因此詳細配置點擊進去看便可，經常使用的以下:
第二個須要提一下則是inject這個配置項，該項指定資源如何注入，咱們直接使用默認的true便可，他會將js資源注入到<body>標籤的底部，若是要注入到頭部填寫head便可

添加`react-loadable`和`react-router`,進行代碼分離和按需加載

這一步和下一步都是在進行代碼的拆分，考慮的是若是全部文件都塞進一個js文件中，會致使這個js文件體積臃腫，而單頁面應用的全部構建又是依賴於這個js文件，因此須要進行代碼分離，只加載當前頁面須要構建的js文件。一般來講，咱們會根據react-router分的頁面來進行代碼分離，再用react-loadable進行分割出來的代碼的異步加載(固然你也能夠將全部組件都進行代碼分離而後異步加載)。因此在這裏咱們先利用react-router分兩個頁面home和page出來：

首先咱們安裝react-router: npm install -S react-router-dom，而後在src/containers/views中新建Home和Page組件:
接着安裝react-loadable: npm install -S react-loadable, 而後在src/containers/shared中新建App組件:

以後在裏面的index.tsx中引用react-router和react-loadable進行組件按需加載: 固然不要忘了使用react-hot-loader:

這一步須要注意的是，Loadable這個函數中的loading參數是必須有的，至於如何使用能夠自行參考react-loadable的github連接。
這個時候去到頁面看一下：在/路徑下，沒有加載page.js這個文件，而切換到/page路徑則會加載page.js文件，這個時候按需加載就完成了:
最後咱們觀察一下打包後的js文件能夠發現已經進行了分離:

會用`optimization`進行第三方庫代碼分離

optimization是webpack4+版本中新出的配置項，這個配置項的功能主要是進行代碼壓縮，優化。在本節中，咱們須要將用到的處於node_modules中的第三方代碼進行分離，在這裏主要用到的是兩個配置項optimization.runtimeChunk和optimization.splitChunks，其中runtimeChunk用於生成維繫各各代碼塊關係的代碼，splitChunks則用於指定須要進行分塊的代碼，和分塊後文件名。

咱們去到build目錄下，新建optimization.js，並添加以下代碼:

而後在webpack.config.js中引入這個配置:
最後咱們打包試試看能夠發現第三方代碼都被打包進vendor.js文件中了:

你能夠經過比對在添加optimization以前和以後打包出來的app.js文件來看出效果。

進行代碼壓縮

在這一步中，咱們主要是作js和css的代碼壓縮和優化

在上面階段中，咱們打包出來的js代碼是已經通過壓縮的:

因此在這個階段咱們能夠利用uglifyjs-webpack-plugin進行一些壓縮優化: 首先咱們須要安裝npm install -D uglifyjs-webpack-plugin，而後去到build/optimization.js中添加以下代碼便可，具體的優化見代碼:

PS: 這裏有一個點須要注意，在uglifyjs-webpack-plugin這個插件中，若是是2.x版本的話是不支持es6規範的，因此建議安裝1.x版本，而我這裏的版本是:
而後咱們進行css代碼的壓縮，這裏須要使用到optimize-css-assets-webpack-plugin插件:npm install -D optimize-css-assets-webpack-plugin。咱們先去Home組件中隨意添加一個樣式並使用它:

而後再去到build/optimization.js添加以下代碼:

具體的插件使用方式能夠自行上github查看該插件。最後查看打包出來後的css代碼:

到如今壓縮代碼步驟也作完了，最後將介紹一下webpack.externals這個選項。

關於`externals`

webpack.externals配置項用於在構建過程當中忽略一些經常使用包的集成，從而下降構建時間和打包後的包大小，它的配置也很簡單，在本章中只作簡單介紹: 在本項目中，咱們能夠將react和react-dom添加進externals中，而後在html模板中引入它們的外部連接:

咱們先去到webpack.config.js中，添加externals選項，而且把react和react-dom添加進去:

這個配置項接收的是一個對象(其餘形式請自行查閱webpack文檔)，對象的鍵是指webapck在獲取這個模塊時候require時候的參數，而對應的值則是標明你打算將這個模塊掛載的變量名，這裏是掛載在window對象中的。
去到build/tpl/index.html中，引入cdn中react和react-dom的連接:
重啓項目，能夠發如今npm run dev中可以正常使用，而且也已經引入了二者的外部資源:
最後咱們來對比一下打包後模塊佔用狀況:

再來對比一下二者打包出來的包體積大小: