feat(prefetch + preload): 增加prefetch跟preload

luoxue-victor · Dec 16, 2019 · 80903d3 · 80903d3
1 parent 08666da
commit 80903d3
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@
  config | add config  option | [83c9f1e](https://github.com/luoxue-victor/learn_webpack/commit/83c9f1e)
  create readme | 创建readme | [571bfaa](https://github.com/luoxue-victor/learn_webpack/commit/571bfaa)
  daasd | asdasd | [0b6ee85](https://github.com/luoxue-victor/learn_webpack/commit/0b6ee85)
+ dashboard and progressbar | 构建时添加仪表盘跟进度条 | [08666da](https://github.com/luoxue-victor/learn_webpack/commit/08666da)
  docs | 整理文档 | [32d578f](https://github.com/luoxue-victor/learn_webpack/commit/32d578f)
  env | 添加环境变量插件 | [e95e772](https://github.com/luoxue-victor/learn_webpack/commit/e95e772)
  eslint | 增加 eslint，并保存是自动修复 | [6dd3812](https://github.com/luoxue-victor/learn_webpack/commit/6dd3812)

diff --git a/README.md b/README.md
@@ -119,6 +119,7 @@ webpack-box inspect --plugin mini-css-extract # 查看指定插件配置
 - [friendly-errors-webpack-plugin 友好错误提示](./config/FriendlyErrorsWebpackPlugin.js)
 - [html-webpack-plugin 生成html](./config/HtmlWebpackPlugin.js)
 - [mini-css-extract-plugin 配置](./config/MiniCssExtractPlugin.js)
+- [PreloadWebpackPlugin](./config/PreloadWebpackPlugin.js)
 - [ProgressBarPlugin 构建时添加进度条配置](./config/ProgressBarPlugin.js)
 - [别名配置](./config/alias.js)
 - [加载资源 images、svg、media、fonts](./config/assets.js)

diff --git a/config/PreloadWebpackPlugin.js b/config/PreloadWebpackPlugin.js
@@ -0,0 +1,23 @@
+// [PreloadWebpackPlugin]
+// npm install  preload-webpack-plugin@next
+module.exports = ({ config, resolve, options }) => {
+  const PreloadWebpackPlugin = require('preload-webpack-plugin')
+  return () => {
+    config.plugin('preload')
+      .use(PreloadWebpackPlugin, [{
+        rel: 'preload',
+        as(entry) {
+          if (/\.css$/.test(entry)) return 'style'
+          if (/\.woff$/.test(entry)) return 'font'
+          if (/\.png$/.test(entry)) return 'image'
+          return 'script'
+        }
+      }])
+    config
+      .plugin('prefetch')
+      .use(PreloadWebpackPlugin, [{
+        rel: 'prefetch',
+        include: 'asyncChunks'
+      }])
+  }
+}
diff --git a/config/ProgressBarPlugin.js b/config/ProgressBarPlugin.js
@@ -2,8 +2,12 @@
 
 module.exports = ({ config, resolve, options }) => {
   const ProgressBarPlugin = require('progress-bar-webpack-plugin')
+  const chalk = require('chalk')
   return () => {
     config.plugin('ProgressBarPlugin')
-      .use(ProgressBarPlugin)
+      .use(ProgressBarPlugin, [{
+        format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
+        clear: false
+      }])
   }
 }
diff --git a/config/dashboard.js b/config/dashboard.js
@@ -2,13 +2,9 @@
 
 module.exports = ({ config, resolve, options }) => {
   const DashboardPlugin = require('webpack-dashboard/plugin')
-  const chalk = require('chalk')
 
   return () => {
     config.plugin('dashboard')
-      .use(DashboardPlugin, [{
-        format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
-        clear: false
-      }])
+      .use(DashboardPlugin)
   }
 }
diff --git a/dist/index/index.html b/dist/index/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html><head><link href="/common/css/index.dc29877e.css" rel="stylesheet"></head>
+<html><head><link href="/common/css/index.dc29877e.css" rel="stylesheet"><link as="style" href="/common/css/src_style_index_postcss.33154f42.css" rel="preload"><link as="script" href="/common/js/src_style_index_postcss.2ab4d4f0.bundle.js" rel="preload"><link as="script" href="/common/js/src_ts_index_ts.17492116.bundle.js" rel="preload"><link href="/common/css/src_style_index_postcss.33154f42.css" rel="prefetch"><link href="/common/js/src_style_index_postcss.2ab4d4f0.bundle.js" rel="prefetch"><link href="/common/js/src_ts_index_ts.17492116.bundle.js" rel="prefetch"></head>
   <head>
     <meta charset="UTF-8">
     <title>index page1</title>

diff --git a/dist/index2/index2.html b/dist/index2/index2.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html><head><link href="/common/css/index.dc29877e.css" rel="stylesheet"><link href="/common/css/index2.dc29877e.css" rel="stylesheet"></head>
+<html><head><link href="/common/css/index.dc29877e.css" rel="stylesheet"><link href="/common/css/index2.dc29877e.css" rel="stylesheet"><link as="style" href="/common/css/src_style_index_postcss.33154f42.css" rel="preload"><link as="script" href="/common/js/src_style_index_postcss.2ab4d4f0.bundle.js" rel="preload"><link as="script" href="/common/js/src_ts_index_ts.17492116.bundle.js" rel="preload"><link href="/common/css/src_style_index_postcss.33154f42.css" rel="prefetch"><link href="/common/js/src_style_index_postcss.2ab4d4f0.bundle.js" rel="prefetch"><link href="/common/js/src_ts_index_ts.17492116.bundle.js" rel="prefetch"></head>
   <head>
     <meta charset="UTF-8">
     <title>index page2</title>

diff --git a/package.json b/package.json
@@ -79,6 +79,7 @@
     "ora": "^4.0.3",
     "postcss-loader": "^3.0.0",
     "postcss-px-to-viewport": "^1.1.1",
+    "preload-webpack-plugin": "^3.0.0-beta.4",
     "progress-bar-webpack-plugin": "^1.12.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",