Lim's Page

# 碰到的问题

# 部署

# 关于https配置

使用curl命令请求koa搭建的服务器，如果传入是curl localhost:3001这种域名和证书无法对应的，就会出现empty reply from server的问题，并不是服务器出问题，这种时候在远程服务器搭建好nginx代理，如果nginx层没有设证书，访问的话会出现ssl error网络无法的问题。因此解决这个问题就是要nginx层设置证书，不能仅仅监听443端口，然后代理proxy_pass https://localhost: 3001。

  • 静态文件通过nginx进行http2传输需要在配置文件指明：listen 443 ssl htt2。
  • nginx静态资源无法请求，出现403 forbidden：nguni.conf中的user nginx改成user root。

# 关于docker

  • docker-compose解决nginx和服务端渲染web程序的容器化。
  • mac环境下docker没有docker0。宿主机ip也不是172.17.0.1，要访问宿主机ip，要通过docker.for.mac.host.internal。

# 开发

# 关于服务端渲染

# webpack服务端配置的externals以及babel中配置antd按需引用

使用antd时的externals配置如下：

  externals: nodeExternals({
    whitelist: /ant-design-vue\/lib\/(.)+\/style\/css/
  })

服务端打包时需要外置化node_modules，但是webpack只能处理js，因此antd相关的css不能外置化，whitelist中设置antd相关文件。

antd按需引用时的babel配置如下：

["import", { "libraryName": "ant-design-vue", "libraryDirectory": "lib", "style": "css" }]

libraryDirectory设置为lib，因为服务端不能使用es的引用方式。

# koa服务端热更新

要点如下：

  • webpack dev配置的pulbicPath设为http://localhost8080，然后服务端中的的clientManifest通过axios进行请求。这样clientManifest指向的静态资源路径就是webpack dev server中的静态资源的路径，当相关代码发生改变时，webpack dev server的热更新功能就会令服务端中的页面发生变化。

# 预先加载dll

clientManifest中有3个部分：all、async、initial，其中initial是根路由所需要的资源，并且其资源是preload的，而async是prefetch的，dll生成的js代码也是prefetch的，但是dll中代码包括vue、axios等不需要按需引用、不常变化的第三方库，vue是页面中dom必须比业务代码先引用的运行时代码，不能是prefetch的，因此在server端代码中将async中的dll代码移到initial中。

###关于service worker

# serviceWorker的引入

配置serviceWorker时要注意clientManifest中不要引用workbox中产生的serviceWorker.js和precache文件，否则serviceWorker.js的逻辑就会在非web worker环境下执行importScripts造成报错。

# workbox路径配置以及serviceWorker热更新有时失效的问题

workbox的swSrc路径必须是绝对路径，使用path.join获得，否则会造成serviceWorker无法热更新的问题。这个问题和webpack的fileSystem有关，webpack的fileSystem是CacheFileSystem，它会将静态资源路径作为一个Set的key，当相关资源发生变化时，就会根据key删除旧的资源并使用新的资源。workbox的injectManifest方法中直接使用传入的swSrc路径作为参数调用readFile方法，

如果使用相对路径，那么key就是相对路径，但是webpack启动时处理serviceWorker保存的key是绝对路径，这样就导致CacheFileSystem无法根据这个相对路径的key删除旧的资源。但是serviceWorker文件有时候会热更新成功，这是因为CacheFileSystem有个计时机制，默认为6s，6s后就会清除旧的资源，此时就会读取新的资源。

####babel转换和webpack打包之模块化处理service worker与业务代码共同引用的模块

babel中的plugin-transform-runtime可以指定corejs为2，2的意思是并不全局注入es6的一些方法，即不是polyfill。如果没有指定转换的module类型，则会默认转成es6模块。处理Promise的时候，会通过import来引入处理的相关代码，此时，如果共同引用的模块中有module.exports的话，就会导致module.exports和import共同使用的报错。解决方法就是babel中指定sourceType为unambiguous，这样其处理文件时，就会将有import和export的处理为es6模块，其他的则处理为正常的script。因此其处理共同的模块时，碰到module.export就不会再通过import的方式引入处理Promise方法的模块，从而不会报错。也可以将module类型设置为commons，但是这样就会失去tree shaking的好处，因此不建议这么做。

# 关于vue框架

vuex和vue-router的时间？

← 网站性能优化 →