## 服务端渲染，不包含Ajax初始化数据

### 1. webpack config 创建
创建两份webpack配置文件，一份为客户端运行文件，一份服务端运行文件
同时我们也需要创建两个入口文件，一个给客户端，一个给服务端。

webpack.server.conf.js

打包服务端代码
```js
    target:'node',
    output:{
      libraryTarget:'commonjs2'
    }
```
不使用自己生成的server.bundle.js，使用client.bundle.js文件。客户端激活server.bundle.js会在开启node服务时被用到
```js
new HtmlWebpackPlugin({
    template: path.resolve(__dirname,'../index.ssr.html'),
    filename:'index.ssr.html',
    files:{
        js:'client.bundle.js'
    },
    excludeChunks:['server']
})
```

### 2. 独立生成新的应用程序实例，避免交叉请求造成的状态污染
以函数形式导出，每次服务端调用时执行函数，生成一份全新的app
```js
import Vue from 'vue'
import App from './App.vue'
export default ()=> {
    const app=new Vue({
        el:'#app',
        render:h=>h(App)
    })
    return {
        app
    }
}
```


### 3. ssr.html介绍

``的作用是作为一个占位符，后续通过vue-server-renderer插件，将服务器解析出的组件html字符串插入到这里。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>服务端渲染</title>
</head>
<body>

<script type="text/javascript" src="<%= htmlWebpackPlugin.options.files.js %>"></script>
</body>
</html>
```

### 4. 创建server服务
```js
createBundleRenderer(serverBundle, { /* 选项 */ })
// serverBundle为webpack编译过后的代码

let renderer=createBundleRenderer(bundle,{   // 创建renderer，此时renderer会有两个值，renderToString和renderToStream
    template:fs.readFileSync(path.resolve(__dirname,'../dist/index.ssr.html'),'utf-8')
})
renderer.renderToString((err,html)=>{  // 返回编译过后的代码
    console.log(html)
    ctx.status =200
    ctx.body=html
})
```
完整代码：
```js
const Koa = require('koa');
const Router = require('koa-router');
const serve = require('koa-static');
const path = require('path');
const fs = require('fs');
const { createBundleRenderer } = require('vue-server-renderer')
const backendApp  = new Koa();
const backendRouter  = new Router();

let bundle=fs.readFileSync(path.resolve(__dirname,'../dist/server.bundle.js'),'utf-8')
let renderer=createBundleRenderer(bundle,{
    template:fs.readFileSync(path.resolve(__dirname,'../dist/index.ssr.html'),'utf-8')
})

backendRouter.get('*',(ctx,next)=>{
    renderer.renderToString((err,html)=>{
        if (err) {
            console.error(err);
            ctx.status = 500;
            ctx.body = '服务器内部错误';
        } else {
            ctx.body = html;
        }
    })
})
backendApp .use(serve(path.resolve(__dirname,'../dist')))
backendApp .use(backendRouter.routes()).use(backendRouter.allowedMethods())
backendApp.listen(3000,()=>{
    console.log('服务器端渲染地址： http://localhost:3000');
}) 
```

## 服务端渲染，包含Ajax初始化数据

**思路：**

1. 在渲染前，要预先获取所有需要的异步数据，然后存到Vuex的store中。

2. 在后端渲染时，通过Vuex将获取到的数据注入到相应组件中。

3. 把store中的数据设置到window.__INITIAL_STATE__属性中。

4. 在浏览器环境中，通过Vuex将window.__INITIAL_STATE__里面的数据注入到相应组件中。

### 1.服务端vuex覆盖客户端vuex
```js
    if (typeof window !== 'undefined' && window.__INITIAL_STATE__) {
        console.log('window.__INITIAL_STATE__', window.__INITIAL_STATE__);
        store.replaceState(window.__INITIAL_STATE__);
        }
```
### 2.在组件里面申明asyncData函数
```js
fetchInitialData 执行后，最终会返回Promise
const fetchInitialData = ({ store }) => {
   return  store.dispatch('fetchBar');
};
```
### 3.入口文件执行完asyncData函数后，才返回app记录App当前下所有的子组件，如果存在asyncData函数，则添加到数组。

所有的asyncData执行完毕以后，才会resolve，context.state 会赋值给window.__INITIAL_STATE__
```js
export default (context)=>{
    return new Promise((resolve,reject)=>{
        const {App,store,app}=createApp()
        let components=App.components
        let asyncDataPromiseFns = []
        Object.values(components).forEach(component=>{
            if(component.asyncData) asyncDataPromiseFns.push(component.asyncData({store}))
        })
        Promise.all(asyncDataPromiseFns).then(result=>{
            context.state = store.state;
            console.log(222);
            console.log(store.state);
            console.log(context.state);
            console.log(context);
            resolve(app);
        })
    })
}
```

### 4.server.js需要添加await
因为现在入口文件返回的是Promise，且在异步返回以后，才会return。
所以我们服务端需要等待入口文件的asyncData执行完以后，才能往下走，否则会有问题
```js
try {
    let html=await new Promise((resolve,reject)=>{
        renderer.renderToString((err,html)=>{
            if (err) {
                reject(err)
            } else {
                resolve(html)
            }
        })
    })
    ctx.status=200
    ctx.body=html
}
catch (err) {
    console.error(err);
    ctx.status = 500;
    ctx.body = '服务器内部错误';
}
```

## 使用serverBundle和clientManifest进行优化
1. 内置的 source map 支持（在 webpack 配置中使用 devtool: 'source-map'）
在开发环境甚至部署过程中热重载（通过读取更新后的 bundle，然后重新创建 renderer 实例）
2. 关键 CSS(critical CSS) 注入（在使用 *.vue 文件时）：自动内联在渲染过程中用到的组件所需的CSS。更多细节请查看 CSS 章节。
3. 使用 clientManifest 进行资源注入：自动推断出最佳的预加载(preload)和预取(prefetch)指令，以及初始渲染所需的代码分割 chunk。


### 1.两份webpack配置文件分别使用
```js
require('vue-server-renderer/client-plugin')
和
require('vue-server-renderer/server-plugin')
```

webpack.server.conf.js
```js
const nodeExternals = require('webpack-node-externals')
devtool: '#source-map',   // 对bundle renderer 提供 source map 支持
externals: [nodeExternals()],   // 打包时忽略node_modules里面的包
```
### 2.server添加配置
```js
const serverBundle = require(path.resolve(__dirname, '../dist/vue-ssr-server-bundle.json'));
const clientManifest = require(path.resolve(__dirname, '../dist/vue-ssr-client-manifest.json'));
const template = fs.readFileSync(path.resolve(__dirname, '../dist/index.ssr.html'), 'utf-8');
let renderer=createBundleRenderer(serverBundle,{
    runInNewContext: false,
    template,
    clientManifest
})
```

## vue-router配置

### entry-server.js更改
```js
router.push(context.url)   // 路由跳转
router.onReady(() => {   
    const matchedComponents = router.getMatchedComponents(); //获取到当前路由的components
    if (!matchedComponents.length) {
        return reject({ code: 404 });
    }
})
```

### server.js更改
```js
let context = {
    url: ctx.url
};
const ssrStream = renderer.renderToStream(context);  // 生成的是Node流文件，不是html文本
ctx.status = 200;
ctx.type = 'html';
ctx.body = ssrStream;
```

## 参考
[带你五步学会Vue SSR](https://segmentfault.com/a/1190000016637877)

实现一个 Vue SSR

## loader
loader本质上就是一个函数

使用自己本地的loader
```js
use:[
    {loader:path.resolve(__dirname,'./loader/a')},
    {loader:path.resolve(__dirname,'./loader/b'),}
]
```
使用resolveLoader参数（webpack配置项）：
```js
resolveLoader: {
    modules: ['node_modules','./loader']
}
use:[
    {loader:'a'},
    {loader:'b'}
]
```


```js
const loaderUtils=require('loader-utils')
module.exports=function (source) {  // option参数获取
    const options=loaderUtils.getOptions(this)
}

module.exports=function (source) { // callback，不需要手动return
    const result=source.replace(/1/g,'2').replace(/console.log$.*$/g,'')
    this.callback(null,result)
}

module.exports=function (source) { // 提前执行async，告知是异步返回
    const result=source.replace(/1/g,'2').replace(/console.log$.*$/g,'')
    const callback=this.async()
    setTimeout(()=>{
        callback(null,result)
    },3000)
}
```

## plugin
plugin本质上就是一个类

webpack plugin会自动使用apply函数，参数compiler下的hooks是plugin的各种生命周期。
tapAsync时，需要手动调用下callback，tap时不需要。constructor可以获取参数。

```js
class A {
    constructor(options){
        this.name=options.name
    }
    apply(compiler){
        compiler.hooks.compile.tap('A',()=>{
            console.log('每次编译都会被执行')
        })
        compiler.hooks.emit.tapAsync('A',(compilation,cb)=>{
            compilation.assets[`${this.name}.txt`]={
                source:function(){
                    return '4'
                },
                size(){
                    return 6
                }
            }
            cb()
        })
    }
}

module.exports=A
```

## bundle

**readFileSync**

fs.readFileSync 会以你当前npm的执行路径为当前路径，而不是文件路径
readFile必须填写第二个参数（callback），不填写则报错

**@babel/parser**

content为文本，可以将文本输出为AST语法解析树
```js
const parser=require('@babel/parser')
const AST=parser.parse(content,{
    sourceType:'module'
})
```

**@babel/traverse**

根据你提供的语法解析树，筛选出你需要的树
```js
const traverse=require('@babel/traverse').default
traverse(AST,{
    ImportDeclaration({node}){
        console.log(node)
    }
})
```

**@babel/core**

将语法树转换为es5代码
```js
const babel=require('@babel/core')
const {code}=babel.transformFromAst(AST,null,{
    presets:["@babel/preset-env"]
})
```

**webpack bundle实现**

1. 获取入口文件js的文本内容
2. 将入口文件的文本内容转换为AST抽象语法树
3. 筛选出入口文件内的import语句
4. 将入口文件的import整合成一个对象（为什么不整合成数组：可以以文件的相对路径来命名）
5. 通过babel模块的core和preset将代码转换为浏览器能识别的代码
6. 每个文件都输出filename, dependencies, code
7. 至此我们获取到了入口文件解析后的代码以及入口文件的依赖关系
8. 通过递归，解析入口文件的依赖关系，以及解析依赖文件的依赖关系，直到所有依赖文件被解析
9. 至此我们获取到了所有文件的依赖关系
10. 将所有文件的依赖图谱转换为对象，filename:{ dependencies,code   }
11. 将图谱转换为可以运行的代码
12. 通过fs模块将文件输出到本地，进行使用


```js
const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const core = require('@babel/core')


const moduleSync = function (entry) {  //给定入口文件，输出文件解析后的代码以及相关依赖
    const content = fs.readFileSync(entry, 'utf-8') //读取文件的JS内容
    const AST = parser.parse(content, {  //将JS内容导出为AST抽象语法树
        sourceType: 'unambiguous'
    })
    const dependencies = {}
    traverse(AST, {   //从AST抽象语法树中筛选出import相关内容
        ImportDeclaration({node}) {
            const dirname = path.dirname(entry) //获取当前JS的所在文件夹(相当于当前node执行路径)
            const file = path.join(dirname, node.source.value) //关联资源的路径(相当于当前node执行路径)
            dependencies[node.source.value] = file
        }
    })
    const {code} = core.transformFromAst(AST, null, {
        presets: ["@babel/preset-env"]
    })
    return {
        filename: entry,
        dependencies,
        code
    }
}

const transformGraph = function (moduleArr) { //将数组格式转换为对象格式，后续方便会用
    let graph = {}
    moduleArr.forEach(item => {
        const key = item.filename
        graph[key] = {
            dependencies: item.dependencies,
            code: item.code
        }
    })
    return graph
}

const makeDependGraph = function (entry) { //生成入口文件和其所有的依赖项
    let entryModule = moduleSync(entry)
    let moduleArr = [entryModule]
    for (let i = 0; i < moduleArr.length; i++) { //for循环每次增加后，都可以在进行一次，而forEach不行
        const dependencies = moduleArr[i].dependencies
        for (let j in dependencies) { //对依赖项进行遍历，如果存在，则再次对其进行统计其依赖项
            moduleArr.push(moduleSync(dependencies[j]))
        }
    }
    return transformGraph(moduleArr)
}

const generateCode=function(entry){ //将对象转换为code代码
    let graph=JSON.stringify(makeDependGraph(entry))
    return `(function(graph){
      function require(entry){
        function localRequire(relativePath){ 
          return require(graph[entry].dependencies[relativePath])
        }
        var exports={};
        (function(require,exports,code){
          eval(code)
        })(localRequire,exports,graph[entry].code)
      }
      require('${entry}')
    })(${graph})`
}

let result = generateCode('src/index.js')

fs.writeFileSync('./index.js',result)

```





Webpack loader、plugin、bundle

## 支付路径问题（ios）
vue单页面开发时，ios会以Landing Page（第一次进入的页面）去进行对比，android下会以current Page（当前页面）进行比较。所以ios即使切换路由，它也只会永远记录第一次页面。

### 解决方案：
1. 支付路径配置   http://h5.safetree.com.cn/vue
2. 在路由的#前面加个?号，微信浏览器就会把后面的路由当成参数过滤掉了。如：http://h5.safetree.com.cn/vue/?#/home/index
忽略后的路径将都是http://h5.safetree.com.cn/vue，无论是android还是ios下，都将生效。
所以我们无论如何切换，微信都会认为路径在http://h5.safetree.com.cn/vue下，所以就可以在任何目录下都可以进行支付。

## 签名报错问题
当路由跳转几步以后，我们将vue页面切换到其他外链。然后在该外链下，快速返回两次。会报出签名失败的错误（config:invalid signature）

是因为我们将location.href当做了签名url，快速的返回两次。回退的第一个页面，签名请求还未结束，所以该请求在第二个页面进行了签名。导致了当前页面的location.href和签名时的页面不一致。

### 解决方案：
URL 要确保只获取 # 号之前部分（有 # 号的话）
http://h5.safetree.com.cn/vue/? 我们将这个链接当做签名url，这个问题将得到解决



支付路径+签名报错(spa)

**Webpack是一个现代化的JavaScript应用程序的模块打包工具，它可以将各种静态资源（包括JavaScript、CSS、图片、字体等）打包成一个或多个JavaScript文件，以便于在浏览器中加载和运行。Webpack具有强大的模块化支持，可以通过各种插件和loader扩展其功能，使得它成为JavaScript应用程序开发中不可或缺的工具之一。**



## npx webpack
**npx webpack index.js**

webpack会用默认配置对index.js进行处理，例如：
创建文件夹dist，index.js内容输出到dist/main.js
必须添加入口文件，npx webpack 则会报错。

**npx webpack**

webpack，默认以根目录下的webpack.config.js为配置文件，配置项如果添加了入口文件，就不需要npx webpack index.js显示指定入口文件了。
当然你也可以指定其他文件为配置文件，只需要npx webpack --config webpackConfig.js。

## 常见loader
file-loader：（可作用于字体，图片，音频等多种文件）将文件打包至文件夹（会存在于文件）

url-loader：（可作用于字体，图片，音频等多种文件），与file-loader一致，是将文件打包成base64内联（不会存在文件）

sass-loader：解析scss，sass文件

postcss-loader：通过postcss插件，对css文件进行处理，比如autoprefixer，postcss-pxtorem

css-loader：解析css文件，参数 importLoaders => 用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader。
参数 modules => 设置为true时，可以通过模块化引入css时，标签元素不会被模块化，但是所有被处理过后的都会变成独立的，无法全局引入css

style-loader：将css文件内容内联到style

## devtool理解

![image.png](https://blog.ccz.life/static/img/98c5e03f7422be4daad34724b175361a.image.png)
- inline-source-map：source-map内联进js代码（速度比较慢，报错会映射行和列）
- cheap-source-map：（速度比较快，报错会映射行，但是不会映射列）
- cheap-module-source-map：会保留源自 loader 的 source map（其余和cheap-source-map一致）
- eval-source-map：（速度比较快，使用eval的方式输出）
- source-map：完整的报错信息（精确映射行，列）

## dev-server理解
**npx webpack -w**

 根据webpack.config.js的配置，文件每次修改都会产生实际的修改后的文件，构建速度慢，而且需要手动刷新页面
 
**webpack-dev-server**

根据webpack.config.js的配置，文件每次修改都会在内存中产生文件，构建速度更快，不需要自己手动刷新页面

**自己编写server**

根据webpack.config.js的配置，文件每次修改都会在内存中产生文件，构建速度更快，需要手动刷新页面
```js
const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const config=require('./webpack.config')
const compiler = webpack(config);
const express = require('express');
const app = express();
app.use(middleware(compiler, {}));
app.listen(3000, () => console.log('Example app listening on port 3000!'));
```

**webpack-dev-server 手动监听热更新**
```js
 if (module.hot) {
   module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');
    printMe();
   })
 }
```

## Tree Shaking理解
只支持ES Module的模块引入（因为ES Module 是静态引入）可以摇走无用的代码

webpack4 mode模式为produciton的时候默认引入 
```js
optimization: {
    usedExports: true
}
```

package.json里面sideEffects字段："sideEffects":false
值为false的情况下所有文件的都会进行检测，最好别填，会有默认配置或者["@babel/polyfill","*.css"]可以忽略这些文件

## splitChunks，runtimeChunk理解

### splitChunks
**1.进行如下配置，将自动把用到的插件统一打成一个js**
```js
optimization: {
    splitChunks:{
      chunks:'all'
    }
}
```
```js
import _ from 'lodash'
import axios from 'axios'
```

lodash和axios都会被打包成vendords-main.js

**2.import异步导入时，会自动分割模块代码分割，例如：**
```js
function get() {
    return import(/* webpackChunkName: "lodash" */'lodash').then((s) => {
        console.log(s.default.join(['a', 'b', 'c']))
    })
}
get()
```
此时的lodash会被单独打成vendor~lodash.js，没有显示定义名字则为0.js。
如果异步用到的包，在插件里面有被使用到，则splitChunks会很智能的把相同模块的内容，打到vendords-main.js插件包里面去

**3.如果定义了名字，所有的模块都会被打包成一个vendor.js（包括异步模块和插件）**
```js
optimization: {
    splitChunks: {
        chunks: 'all',
        name: 'vendor'
    }
}
```



4.分包配置
```js
config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
          libs: {
              name: 'chunk-libs',
              test: /[\\/]node_modules[\\/]/,
              priority: 10,
              chunks: 'initial' // 只打包初始时依赖的第三方
          },
          vant: {
              name: 'chunk-vant', // 单独将 vant 拆包
              priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
              test: /[\\/]node_modules[\\/]vant[\\/]/
          },
          commons: {
              name: 'chunk-commons',
              test: resolve('src/components'), // 可自定义拓展你的规则
              minChunks: 3, // 最小公用次数
              priority: 5,
              reuseExistingChunk: true
          }
      }
  })
```

### runtimeChunk
它的作用是将包含chunks 映射关系的 list单独从 app.js里提取出来，因为每一个 chunk 的 id 基本都是基于内容 hash 出来的，所以你每次改动都会影响它，如果不将它提取出来的话，等于app.js每次都会改变。
```js
config.optimization.runtimeChunk({
    name:'manifest'
})
```

## preload prefetch
Preload 是一个声明式 fetch，可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源。
Preload通常用于本页面要用到的关键资源，包括关键js、字体、css文件。Preload将会把资源得下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度。

Prefetch 告诉浏览器这个资源将来可能需要，但是什么时间加载这个资源是由浏览器来决定的。
也就是说prefetch通常用于加速下一次导航，而不是本次的。


## 环境变量定义

可以在启动命令时设置环境变量，
```json
"scripts": {
  "bundle": "webpack",
  "dev": "webpack-dev-server --env.development",
  "build":"webpack --env.production"
}
```
但是这种环境变量只有在配置文件里面使用函数导出才能被读取，
```js
module.exports=(env)=>{
    if(env.production){
         console.log('生产环境')
    }
  return { }
}
```
process.env读取不到这样定义的变量，需要被读取到，使用cross-env

## webpack 性能优化
- node，npm，yarn版本尽可能的新
- 用好loader的include，exclude，不对无用模块进行loader处理
- plugin环境区分，比如开发环境不使用代码压缩，分割之类的
- resolve extensions尽量少配置，资源查找时会有损耗
- 第三方模块提前打包dll

## dll

1.第三方模块打包，且生成包的映射关系

添加命令：
```json
"dll": "webpack --config ./dll/webpack.dll.js",
```
执行命令，生成dll.js和dll.json，生成的dll需要带hash，避免缓存。DllPlugin的name需要和library相同。

dll/webpack.dll.js
```js
const path=require('path')
const webpack=require('webpack')
module.exports={
    mode:'production',
    entry:{
        dll:['axios','better-scroll','vue','vue-router','vuex']
    },
    output:{
        filename:'chunk-[name].[chunkhash:8].js',
        path:path.resolve(__dirname,'./'),
        library:'[name]'
    },
    plugins:[
        new webpack.DllPlugin({
            name:'[name]',
            path:path.resolve(__dirname,'./chunk-[name].manifest.json')
        })
    ]
}
```

2.生产环境下，使用dll
```js
const webpack=require('webpack')
const path = require('path')
const AddAssetHtmlPlugin=require('add-asset-html-webpack-plugin')
new AddAssetHtmlPlugin({
    filepath:path.resolve(__dirname, './dll/chunk-dll.*.js'),
    outputPath:'js',
    publicPath:`${publicPath}js`
}), //dll.js添加
new webpack.DllReferencePlugin({
    manifest:path.resolve(__dirname, './dll/chunk-dll.manifest.json')
})  //dll 映射关系
```

## PWA

navigator.serviceWorker只在HTTPS或者localhost生效

webpack配置
```js
const workBoxPlugin=require('workbox-webpack-plugin')
new workBoxPlugin.GenerateSW({
    clientsClaim:true,
    skipWaiting:true
})
```
main.js入口文件配置
```js
if('serviceWorker' in navigator){
  window.addEventListener('load',()=>{
    navigator.serviceWorker.register('./service-worker.js').then((res)=>{
      console.log('pwa success',res)
    }).catch((err)=>{console.log('pwa error',err)})
  })
}

workbox.setConfig({debug: false});  关闭console log信息
```

Webpack4 学习

打开微信任意一个聊天界面，输入"debugx5.qq.com"，发送，点击已经发送出去的这条消息，可以进入到"X5 调试页面"，如图：

![image.png](https://blog.ccz.life/static/img/5a9514b9f27a72af9c584b1726840848.image.png)

![image.png](https://blog.ccz.life/static/img/d34c79a0068e554caee8bbfbe8a92385.image.png)