webpack4從0搭建組件庫的實現(xiàn)
代碼分離
代碼分離方法有三種:
- 入口起點:使用 entry 配置手動地分離代碼。
- 防止重復:使用 SplitChunksPlugin 去重和分離 chunk。
- 動態(tài)導入:通過模塊中的內聯(lián)函數(shù)調用來分離代碼。
動態(tài)導入(dynamic imports)
- import()
- require.ensure
預取/預加載模塊(prefetch/preload module)
webpack v4.6.0+ 添加了預取和預加載的支持。
在聲明 import 時,使用下面這些內置指令,可以讓 webpack 輸出 "resource hint(資源提示)",來告知瀏覽器:
- prefetch(預取):將來某些導航下可能需要的資源
- preload(預加載):當前導航下可能需要資源
配置項重點詳解
(1)mode: "pruduction"
啟用 minification(代碼壓縮) 和 tree shaking (usedExports:true)
自動指定DefinePlugin:process.env.NODE_ENV === 'production'
(2)devtool
source map 簡介
生產環(huán)境:source-map
開發(fā)環(huán)境:inline-source-map
(3)optimization
splitChunks
splitChunks: { chunks: 'all', // 提取公共模塊 loadash // 將第三方庫(library)(例如 lodash 或 react)提取到單獨的 vendor chunk 文件中,是比較推薦的做法 // 利用 client 的長效緩存機制,命中緩存來消除請求,并減少向 server 獲取資源,同時還能保證 client 代碼和 server 代碼版本一致。 cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } },
runtimeChunk
runtimeChunk: 'single' // 提取引導模板 將 runtime 代碼拆分為一個單獨的 chunk
(5)output
// filename: '[name].[contenthash].js', // content hash 內容變化才會變化 filename: 'webpack-numbers.js', path: path.resolve(__dirname, 'dist'), // 暴露 library 這是庫名稱 import from 'webpackNumbers' library: 'webpackNumbers', libraryTarget: 'umd'
(6)plugins
HashedModuleIdsPlugin
const { HashedModuleIdsPlugin } = require('webpack'); plugins: [ // 不會因模塊增加和減少導致的模塊內容變化,增加長緩存命中機制 new HashedModuleIdsPlugin() ],
BundleAnalyzerPlugin
分析打包代碼
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); plugins: [ new BundleAnalyzerPlugin() ]
到此這篇關于webpack4從0搭建組件庫的實現(xiàn)的文章就介紹到這了,更多相關webpack4搭建組件庫內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript樹的深度優(yōu)先遍歷和廣度優(yōu)先遍歷算法示例
這篇文章主要介紹了JavaScript樹的深度優(yōu)先遍歷和廣度優(yōu)先遍歷算法,結合實例形式分析了JavaScript樹的深度優(yōu)先遍歷、廣度優(yōu)先遍歷遞歸與非遞歸相關實現(xiàn)技巧,需要的朋友可以參考下2018-07-07基于JS實現(xiàn)橫線提示輸入驗證碼隨驗證碼輸入消失(js驗證碼的實現(xiàn))
最近在開微信的頁面,在項目需求中遇到之前沒有做過的功能,要求橫線提示輸入驗證碼隨驗證碼輸入橫線消失,基于js怎么實現(xiàn)的呢?下面小編給大家分享基于js實現(xiàn)驗證碼功能,感興趣的朋友一起看看吧2016-10-10JavaScript實現(xiàn)動態(tài)刪除列表框值的方法
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)刪除列表框值的方法,涉及javascript針對select列表框的遍歷與刪除操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08