perf(webpack): optimization webpack

Chaoyingz · Sep 10, 2019 · 98788ce · 98788ce
1 parent 973b606
commit 98788ce
Show file tree

Hide file tree

Showing 14 changed files with 994 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
     "lint": "eslint --ext .js,.vue src",
     "commit": "git-cz",
     "dev": "cross-env NODE_ENV=development webpack --watch --hide-modules",
-    "build": "rm -rf ./dist && cross-env NODE_ENV=production webpack --hide-modules"
+    "build": "cross-env NODE_ENV=production webpack --hide-modules",
+    "analyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --hide-modules"
   },
   "main": "index.js",
   "author": "chaunceywe",
@@ -16,10 +17,12 @@
   "devDependencies": {
     "@babel/core": "^7.5.5",
     "@vue/eslint-config-prettier": "^5.0.0",
+    "autoprefixer": "^9.6.1",
     "axios": "^0.19.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
+    "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.0.4",
     "cross-env": "^5.2.1",
     "css-loader": "^3.2.0",
@@ -31,17 +34,21 @@
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-vue": "^5.2.3",
     "file-loader": "^4.2.0",
+    "html-webpack-plugin": "^3.2.0",
     "md5": "^2.2.1",
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
+    "postcss-loader": "^3.0.0",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
+    "terser-webpack-plugin": "^2.0.1",
     "url-loader": "^2.1.0",
     "vue-clipboard2": "^0.3.1",
     "vue-loader": "^15.7.1",
     "vue-svg-loader": "^0.12.0",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^4.39.3",
+    "webpack-bundle-analyzer": "^3.4.1",
     "webpack-cli": "^3.3.7"
   },
   "config": {

diff --git a/plugin.js b/plugin.js
@@ -0,0 +1,12 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+exports.htmlPlugin = name =>
+  new HtmlWebpackPlugin({
+    title: "tua translate",
+    hash: true,
+    cache: true,
+    inject: "body",
+    filename: `./pages/${name}.html`,
+    template: "../public/index.html",
+    chunks: [name]
+  });
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+};
diff --git a/src/popup/popup.html → public/index.html b/src/popup/popup.html → public/index.html
@@ -2,15 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <title></title>
 </head>
-<body class="tua-popup">
+<body>
   <div id="tua-app"></div>
-  <script src="popup.js"></script>
 </body>
-
-<style>
-body.tua-popup {
-  margin: 0;
-}
-</style>
 </html>
diff --git a/src/assets/scss/tua-trans.scss b/src/assets/scss/tua-trans.scss
@@ -13,7 +13,7 @@ body:not(footer):not(header) p.tua-trans-source {
   padding-bottom: 2px;
 }
 body:not(footer):not(header) p.tua-trans-result {
-  border-left: 3px solid #a3a2a2;
+  border-left: 3px solid #42b983;
   color: #41464B;
   margin-top: 0;
   padding-top: 2px;

diff --git a/src/content/content.html b/src/content/content.html
diff --git a/src/content/content.js → src/content/index.js b/src/content/content.js → src/content/index.js
diff --git a/src/manifest.json b/src/manifest.json
@@ -17,7 +17,7 @@
       "128": "icons/tua_logo.png"
     },
     "default_title": "Tuà 翻译",
-    "default_popup": "popup/popup.html"
+    "default_popup": "pages/popup.html"
   },
   "permissions": [
     "activeTab",
@@ -27,13 +27,13 @@
     "https://fanyi-api.baidu.com/"
   ],
   "background": {
-    "scripts": ["background.js"],
+    "scripts": ["js/background.js"],
     "persistent": false
   },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["content/content.js"]
+      "js": ["js/content.js"]
     }
   ]
 }
diff --git a/src/options/options.html → src/options/index.js b/src/options/options.html → src/options/index.js
diff --git a/src/options/options.js b/src/options/options.js
diff --git a/src/popup/Popup.vue b/src/popup/Popup.vue
@@ -82,6 +82,12 @@ export default {
 };
 </script>
 
+<style>
+body {
+  margin: 0;
+}
+</style>
+
 <style lang="scss" scoped>
 @import "../assets/scss/popup.scss";
 </style>
diff --git a/src/popup/popup.js → src/popup/index.js b/src/popup/popup.js → src/popup/index.js
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,47 +1,67 @@
 const path = require("path");
+const webpack = require("webpack");
 const Dotenv = require("dotenv-webpack");
+const { htmlPlugin } = require("./plugin");
 const { version } = require("./package.json");
 const { VueLoaderPlugin } = require("vue-loader");
+const TerserPlugin = require("terser-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
+  .BundleAnalyzerPlugin;
 
 const config = {
   mode: process.env.NODE_ENV,
   context: __dirname + "/src",
   entry: {
     background: "./background.js",
-    "popup/popup": "./popup/popup.js",
-    "options/options": "./options/options.js",
-    "content/content": "./content/content.js"
+    popup: "./popup",
+    options: "./options",
+    content: "./content"
   },
   output: {
     path: __dirname + "/dist",
-    filename: "[name].js"
+    filename: "js/[name].js",
+    chunkFilename: "js/[name].js"
   },
   resolve: {
     extensions: [".js", ".vue", "json"],
     alias: {
       "@": path.resolve(__dirname, "./src/")
     }
   },
+  stats: {
+    entrypoints: false,
+    children: false
+  },
+  performance: {
+    hints: false
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()]
+  },
   module: {
     rules: [
       {
         test: /\.vue$/,
         loaders: "vue-loader",
         options: {
           loaders: {
-            sass: ["vue-style-loader", "css-loader", "sass-loader"]
+            sass: [
+              process.env.NODE_ENV !== "production"
+                ? "vue-style-loader"
+                : MiniCssExtractPlugin.loader,
+              "css-loader",
+              "sass-loader"
+            ]
           }
         }
       },
       {
         test: /\.js$/,
-        loader: "babel-loader",
-        exclude: file => /node_modules/.test(file) && !/\.vue\.js/.test(file)
-      },
-      {
-        test: /\.css$/,
-        use: ["style-loader", "css-loader"]
+        loader: "babel-loader"
       },
       {
         test: /\.(png|jpg|jpeg|gif|ico)$/,
@@ -52,8 +72,21 @@ const config = {
         }
       },
       {
-        test: /\.scss$/,
-        use: ["vue-style-loader", "css-loader", "sass-loader"]
+        test: /\.(s*)css$/,
+        include: path.resolve(__dirname, "./src/content"),
+        use: ["vue-style-loader", "css-loader", "postcss-loader", "sass-loader"]
+      },
+      {
+        test: /\.(s*)css$/,
+        exclude: path.resolve(__dirname, "./src/content"),
+        use: [
+          process.env.NODE_ENV !== "production"
+            ? "vue-style-loader"
+            : MiniCssExtractPlugin.loader,
+          "css-loader",
+          "postcss-loader",
+          "sass-loader"
+        ]
       },
       {
         test: /\.svg$/,
@@ -62,21 +95,11 @@ const config = {
     ]
   },
   plugins: [
+    new CleanWebpackPlugin(),
     new VueLoaderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
     new CopyWebpackPlugin([
       { from: "icons", to: "icons" },
-      {
-        from: "popup/popup.html",
-        to: "popup/popup.html"
-      },
-      {
-        from: "options/options.html",
-        to: "options/options.html"
-      },
-      {
-        from: "content/content.html",
-        to: "content/content.html"
-      },
       {
         from: "manifest.json",
         to: "manifest.json",
@@ -93,8 +116,17 @@ const config = {
         }
       }
     ]),
-    new Dotenv({ path: ".env.local" })
+    new Dotenv({ path: ".env.local" }),
+    htmlPlugin("popup"),
+    htmlPlugin("options"),
+    new MiniCssExtractPlugin({
+      filename: "css/[name].[chunkhash:8].css",
+      chunkFilename: "css/[name].[chunkhash:8].css"
+    })
   ]
 };
+if (process.env.ANALYZER) {
+  config.plugins.push(new BundleAnalyzerPlugin());
+}
 
 module.exports = config;