一去枷、webpack優(yōu)化
-
js 代碼分割驳遵，設(shè)置未變動(dòng)代碼文件的 hash 值不變
-
將不在開(kāi)發(fā)中不會(huì)變動(dòng)的代碼祝蝠，單獨(dú)打包出來(lái)撒轮，比如
node_modules內(nèi)的插件// 入口文件main.js import _ from 'lodash' console.log(_.join([1, 2, 3, 4], '——'));// webpack的配置 splitChunks: { chunks: "async", // 打包模塊的引入類型 async:異步引入 initial:同步引入 all:上面兩者 minSize: 30000, // 最小大小的文件會(huì)被 代碼分割 minChunks: 1, // 打包出來(lái)的js文件(chunk)中有多少chunk引用 就被分割打包产捞，這里代表一個(gè)打包出來(lái)的chunk就被代碼分割 maxAsyncRequests: 5, // 最大異步引入個(gè)數(shù) 超出個(gè)數(shù)的不被分割 maxInitialRequests: 3, // 最大同步引入個(gè)數(shù) 超出個(gè)數(shù)的不被分割 automaticNameDelimiter: '~', // 組裝名字中間的間隔符 下面cacheGroups 就被打包成 vendors~lodash.js name: true, // 允許自定義分割打包出來(lái)的名稱 cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, // 正則匹配 priority: -10, // 權(quán)重 如果比default中的priority大先執(zhí)行這個(gè) 小的話先執(zhí)行default里面的 }, default: { minChunks: 2, // 打包出來(lái)的js文件(chunk)中有多少chunk引用 就被分割打包醇锚，這里代表2個(gè)打包出來(lái)的chunk就被代碼分割 priority: -20, // 權(quán)重 reuseExistingChunk: true // 代碼中如果引入 a模塊 a模塊依賴 b模塊 。如果我們?cè)诖a中都使用了a和b 在分割打包的時(shí)候坯临，如果會(huì)將 a 和 b模塊在vendors打包了 焊唬，當(dāng)在引入b模塊的時(shí)候，reuseExistingChunk: true 就不需要default重新分割打包了 } } }// webpack 出口配置 contenthash：這個(gè)是代碼不發(fā)生變化的時(shí)候看靠，hash值不變 output: { filename: '[name]_[contenthash].js', path: path.join(__dirname, 'dist') } -
js 代碼分割赶促，預(yù)取/預(yù)加載模塊(prefetch/preload module)
import(/* webpackPrefetch: true */ 'LoginModal'); // 在所有代碼加載完之后，執(zhí)行異步異加載 import(/* webpackPreload: true */ 'ChartingLibrary');
-
待續(xù).....
