亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

webpack4從0搭建組件庫(kù)的實(shí)現(xiàn)

 更新時(shí)間：2020年11月29日 08:35:08   作者：lihaixing  
這篇文章主要介紹了webpack4從0搭建組件庫(kù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

代碼分離

代碼分離方法有三種：

  • 入口起點(diǎn)：使用 entry 配置手動(dòng)地分離代碼。
  • 防止重復(fù)：使用 SplitChunksPlugin 去重和分離 chunk。
  • 動(dòng)態(tài)導(dǎo)入：通過(guò)模塊中的內(nèi)聯(lián)函數(shù)調(diào)用來(lái)分離代碼。

動(dòng)態(tài)導(dǎo)入(dynamic imports)

  • import()
  • require.ensure

預(yù)取/預(yù)加載模塊(prefetch/preload module)

webpack v4.6.0+ 添加了預(yù)取和預(yù)加載的支持。

在聲明 import 時(shí)，使用下面這些內(nèi)置指令，可以讓 webpack 輸出 "resource hint(資源提示)"，來(lái)告知瀏覽器：

  • prefetch(預(yù)取)：將來(lái)某些導(dǎo)航下可能需要的資源
  • preload(預(yù)加載)：當(dāng)前導(dǎo)航下可能需要資源

配置項(xiàng)重點(diǎn)詳解

（1）mode: "pruduction"
啟用 minification(代碼壓縮) 和 tree shaking (usedExports:true)
自動(dòng)指定DefinePlugin：process.env.NODE_ENV === 'production'

（2）devtool
source map 簡(jiǎn)介

生產(chǎn)環(huán)境：source-map
開(kāi)發(fā)環(huán)境：inline-source-map

（3）optimization
splitChunks

splitChunks: {
 chunks: 'all', // 提取公共模塊 loadash
 // 將第三方庫(kù)(library)（例如 lodash 或 react）提取到單獨(dú)的 vendor chunk 文件中，是比較推薦的做法
 // 利用 client 的長(zhǎng)效緩存機(jī)制，命中緩存來(lái)消除請(qǐng)求，并減少向 server 獲取資源，同時(shí)還能保證 client 代碼和 server 代碼版本一致。
 cacheGroups: {
  vendor: {
   test: /[\\/]node_modules[\\/]/,
   name: 'vendors',
   chunks: 'all'
  }
 }
},

runtimeChunk

runtimeChunk: 'single' // 提取引導(dǎo)模板 將 runtime 代碼拆分為一個(gè)單獨(dú)的 chunk

（5）output

// filename: '[name].[contenthash].js', // content hash 內(nèi)容變化才會(huì)變化
filename: 'webpack-numbers.js', 
path: path.resolve(__dirname, 'dist'),

// 暴露 library 這是庫(kù)名稱 import from 'webpackNumbers'
library: 'webpackNumbers', 
libraryTarget: 'umd'

（6）plugins

HashedModuleIdsPlugin

const { HashedModuleIdsPlugin } = require('webpack');

plugins: [
  // 不會(huì)因模塊增加和減少導(dǎo)致的模塊內(nèi)容變化，增加長(zhǎng)緩存命中機(jī)制
  new HashedModuleIdsPlugin()
],

BundleAnalyzerPlugin

分析打包代碼

const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');

plugins: [
  new BundleAnalyzerPlugin()
]

到此這篇關(guān)于webpack4從0搭建組件庫(kù)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)webpack4搭建組件庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論