資訊專欄INFORMATION COLUMN
摘要：使用該插件帶來的好處提升打包速度和項目體積將入口的文件中所有公共的代碼提取出來，減少代碼體積同時提升打包速度。利用緩存機制依賴的公共模塊文件一般很少更改或者不會更改，這樣獨立模塊文件提取出可以長期緩存。那么，下面就來開啟正確的打開方式。
按需引用 外部的組件按需引用
2.啟用happypack多核構(gòu)建項目
3.修改source-map配置
啟用DllPlugin和DllReferencePlugin預編譯庫文件
1、按需引用
1.1幾乎所有的第三方組件框架都會提供組件的按需引用方式，以iview為例，通過借助插件babel-plugin-import可以實現(xiàn)按需加載組件，減少文件體積，只需要修改.babelrc文件
npm install babel-plugin-import --save-dev
// .babelrc
{
"plugins": [["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]]
}
1.2然后這樣按需引入組件，就可以減小體積了
import { Button } from "iview"
Vue.component("Table", Table)
2、啟用happypack多核構(gòu)建項目
安裝happypack后，修改/build/webpack.base.conf.js文件即可
npm install happypack --save-dev
// /build/webpack.base.conf.js
const HappyPack = require("happypack")
const os = require("os")
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack插件
plugins: [
new HappyPack({
id: "happy-babel-js",
loaders: ["babel-loader?cacheDirectory=true"],
threadPool: happyThreadPool,
})
]
// 修改引入loader
{
test: /.js$/,
// loader: "babel-loader",
loader: "happypack/loader?id=happy-babel-js", // 增加新的HappyPack構(gòu)建loader
include: [resolve("src"), resolve("test")]
}
實現(xiàn)js緩存
webpack插件CommonsChunkPlugin的主要作用是抽取webpack項目入口chunk的公共部分，具體的用法就不做過多介紹，不太了解可以參考webpack官網(wǎng)介紹；
該插件是webpack項目常用的一個優(yōu)化功能，幾乎在每個webpack項目中都會用到。使用該插件帶來的好處：
提升webpack打包速度和項目體積：將webpack入口的chunk文件中所有公共的代碼提取出來，減少代碼體積；同時提升webpack打包速度。
利用緩存機制：依賴的公共模塊文件一般很少更改或者不會更改，這樣獨立模塊文件提取出可以長期緩存。
但是在項目中，若插件打開方式不正確的話，上面的第二點其實是無法實現(xiàn)，因為這種情況下：
沒有被修改過的公有代碼或庫代碼打包出的Entry Chunk，會隨著其他業(yè)務(wù)代碼的變化而變化，導致頁面上的長緩存機制失效。
那么，下面就來開啟CommonsChunkPlugin正確的打開方式。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53386.html
摘要：使用該插件帶來的好處提升打包速度和項目體積將入口的文件中所有公共的代碼提取出來，減少代碼體積同時提升打包速度。利用緩存機制依賴的公共模塊文件一般很少更改或者不會更改，這樣獨立模塊文件提取出可以長期緩存。那么，下面就來開啟正確的打開方式。 按需引用 外部的組件按需引用 2.啟用happypack多核構(gòu)建項目 3.修改source-map配置 啟用DllPlugin和DllReferen...
摘要：使用該插件帶來的好處提升打包速度和項目體積將入口的文件中所有公共的代碼提取出來，減少代碼體積同時提升打包速度。利用緩存機制依賴的公共模塊文件一般很少更改或者不會更改，這樣獨立模塊文件提取出可以長期緩存。那么，下面就來開啟正確的打開方式。 按需引用 外部的組件按需引用 2.啟用happypack多核構(gòu)建項目 3.修改source-map配置 啟用DllPlugin和DllReferen...
摘要：特性比較熱門的兩大特性，零配置和速度快號稱提速上限一般情況下，相比于低版本，場景下第三方依賴打包速度和場景下本地服務(wù)首次啟動速度都得到顯著提升零配置通過指定當前場景為開發(fā)模式還是生產(chǎn)模式，自動設(shè)置好當前場景的默認配置，用戶即可馬上使用，不需 webpack4特性 webpack4比較熱門的兩大特性，零配置和速度快（號稱提速上限98%） 一般情況下，webpack4相比于低版本，prod...
摘要：在項目架構(gòu)中這兩個東西基本成為了標配，但的模塊必須在使用前經(jīng)過的構(gòu)建后文稱為才能在瀏覽器端使用，而每次修改也都需要重新構(gòu)建后文稱為才能生效，如何提高的構(gòu)建效率成為了提高開發(fā)效率的關(guān)鍵之一。 0. 前言 showImg(https://segmentfault.com/img/remote/1460000005770045); 圖1：ES6 + Webpack + React + Bab...
閱讀 2293·2021-11-25 09:43
閱讀 3446·2021-10-25 09:48
閱讀 1321·2021-09-13 10:24
閱讀 2735·2019-08-29 15:07
閱讀 1258·2019-08-29 13:14
閱讀 3265·2019-08-29 12:22
閱讀 1354·2019-08-29 11:32
閱讀 3229·2019-08-29 11:23
