树摇算法

README.md

@@ -1,3 +1,4 @@
+
 #### 插件记录 
 ##### 多页面应用 匹配入口文件
 - 使用`glob`插件，`glob.sync(path.join(__dirname ,"./src/*/index.js"))`方法会匹配`src`目录下  
@@ -25,6 +26,7 @@ new HtmlWebpackPlugin({
 `{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] }`
 ##### js优化
 > webpack 4 版本自带了`UglifyJsPlugin`插件，会对js进行压缩
+
 ##### css优化
 - 压缩css`OptimizeCSSAssetsPlugin`，需要用到`cssnano`库
 ```
@@ -81,8 +83,7 @@ new OptimizeCSSAssetsPlugin({ // 压缩css
 
 - chunkhash
 > 根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值,在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。
-> 
-**但是这样又有一个问题，因为我们是将样式作为模块import到JavaScript文件中的，所以它们的chunkhash是一致的**
+> **但是这样又有一个问题，因为我们是将样式作为模块import到JavaScript文件中的，所以它们的chunkhash是一致的**
 
 - contenthash
 > contenthash是针对文件内容级别的，只有你自己模块的内容变了，那么hash值才改变
@@ -132,11 +133,62 @@ rules: [
     }],
   },
 ]
+
 ```
+##### source-map 开发环境开启，线上关闭
+配置详见：[webpack devtool](https://www.webpackjs.com/configuration/devtool/)
+
 ##### 辅助工具
 - `CleanWebpackPlugin` 构建完成之前删除dist目录
 ```
 plugins:[
   new CleanWebpackPlugin()
 ]
-```
+```
+##### 基础库分离
+- 使用`SplitChunksPlugin`插件将`React React-dom`通过CDN引入
+- `chunks` 参数说明
+  - async 只分离异步引入的库
+  - initial 只分离同步引入的库
+  - all 分离引入的库
+配置详见： [split-chunks-plugin/](https://www.webpackjs.com/plugins/split-chunks-plugin/#optimization-splitchunks)
+
+```
+plugins:[
+  optimization : {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /(react|react-dom)/,
+          name: "vendors",
+          chunks: 'all'
+        }
+      }
+    }
+  }
+或者
+optimization : {
+    splitChunks: {
+      minSize: 0, // 引用的模块大小，
+      cacheGroups: {
+        commons: {
+          // test: /(react|react-dom)/,
+          name: "commons",
+          chunks: 'all',
+          minChunks: 3, // 最少引用了两次
+        }
+      }
+    }
+  }
+```
+
+##### 摇树优化
+
+一个模块有多个方法，只要引用了一个方法，这个文件都会被打包到bundle中，`tree shaking`就是只把引用了到方法打入bundle中，没用到的方法会在`uglify`阶段去除掉
+
+- 使用：
+`webpack`默认支持,在`mode:production`的情况下默认开启,在`.babelrc`文件中设置`modules:false`即可
+
+- 要求
+必须是`es6`的语法
+

common/index.js

@@ -0,0 +1,3 @@
+export function common () {
+    return 'common'
+}

package.json

@@ -35,7 +35,7 @@
   "scripts": {
     "build": "webpack --config webpack.prod.js",
     "watch": "webpack --watch",
-    "dev": "webpack-dev-server --config webpack-dev.js --open"
+    "dev": "webpack-dev-server --config webpack.dev.js --open"
   },
   "dependencies": {
     "lib-flexible": "^0.3.2"

src/index/index.js

@@ -1,6 +1,7 @@
 
 import React from 'react'
 import ReactDom from 'react-dom'
+import { common } from '../../common' // 提取公共代码测试，使用了两次
 class Home extends React.Component {
     render(){
         return (

src/search/index.js

@@ -3,6 +3,9 @@ import React from 'react'
 import ReactDom from 'react-dom'
 import './less/search.less'
 import img from './images/screenshot.gif'
+import { common } from '../../common' // 提取公共代码测试，使用了两次
+import { a } from './tree-shaking' // 摇树优化，只打包引用的函数
+
 class Search extends React.Component {
     render(){
         return (

src/search/tree-shaking.js

@@ -0,0 +1,6 @@
+export function a () {
+    console.log('a')
+}
+export function b () {
+    console.log('b')
+}

webpack.dev.js

@@ -2,12 +2,43 @@ const path = require('path')
 const webpack = require('webpack')
 // const CleanWebpackPlugin = require("clean-webpack-plugin")
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-
+const HtmlWebpackPlugin = require("html-webpack-plugin")
+const glob = require('glob')
+const setMPA = () => {
+    const entry = {}
+    const htmklWebpackPlugins = [];
+    const entryFiles = glob.sync(path.join(__dirname ,"./src/*/index.js")) // 匹配入口文件
+    console.log('entryFiles',entryFiles)
+    Object.keys(entryFiles).map((index) => {
+      const entryFile = entryFiles[index]
+      const match = entryFile.match(/src\/(.*)\/index\.js/)
+      const pageName = match && match[1]
+      entry[pageName] = entryFile; // 设置entry
+      htmklWebpackPlugins.push( // 设置html模版
+        new HtmlWebpackPlugin({
+          template: path.join(__dirname, `src/${pageName}/index.html`),
+          filename: `${pageName}.html`,
+          chunks: [pageName],
+          inject: true, // 注入css/js
+          minify: { // 模板格式设置
+            html5:true,
+            collapseWhitespace: true ,
+            preserveLicenseComments: false ,
+            minifyJS: true ,
+            minifyCSS: true,
+            removeComments: true,
+          }
+        }),
+      )
+    })
+    return {
+      entry,
+      htmklWebpackPlugins ,
+    }
+  }
+  const {entry,htmklWebpackPlugins} = setMPA()
 module.exports = {
-    entry: {
-        app: './src/index.js',
-        search: './src/search.js'
-    },
+    entry,
     output: {
         path: path.join(__dirname, 'dist'),
         filename: '[name].js'
@@ -51,9 +82,10 @@ module.exports = {
     plugins:[
         new webpack.HotModuleReplacementPlugin(),
         new CleanWebpackPlugin(),
-    ],
+    ].concat(htmklWebpackPlugins),
     devServer: {
         contentBase: path.join(__dirname ,"dist"),
         hot: true ,
-    }
+    },
+    devtool: 'cheap-source-map'
 }

webpack.prod.js

@@ -19,7 +19,7 @@ const setMPA = () => {
       new HtmlWebpackPlugin({
         template: path.join(__dirname, `src/${pageName}/index.html`),
         filename: `${pageName}.html`,
-        chunks: [pageName],
+        chunks: ['vendors', pageName],
         inject: true, // 注入css/js
         minify: { // 模板格式设置
           html5:true,
@@ -121,5 +121,29 @@ module.exports = {
       cssProcessor: require('cssnano')
     }),
     new CleanWebpackPlugin(), // 构建完成之前删除原来到构建目录
-  ].concat(htmklWebpackPlugins)
+  ].concat(htmklWebpackPlugins),
+  // optimization : {
+  //   splitChunks: {
+  //     cacheGroups: {
+  //       commons: {
+  //         test: /(react|react-dom)/,
+  //         name: "vendors",
+  //         chunks: 'all'
+  //       }
+  //     }
+  //   }
+  // }
+  optimization : {
+    splitChunks: {
+      minSize: 0, // 引用的模块大小，
+      cacheGroups: {
+        commons: {
+          // test: /(react|react-dom)/,
+          name: "commons",
+          chunks: 'all',
+          minChunks: 3, // 最少引用了两次
+        }
+      }
+    }
+  }
 }