汇总一下webgl加载出错的解决方案：

Chrome

Chrome 是对 WebGL 支持度最好的浏览器，从版本号18开始就对 WebGL 1.0 有了非常全面的支持（现在最新的版本为55+）。但在不同用户的电脑上，就算版本号>18的chrome也能碰到各种各样的奇怪问题而无法打开 WebGL 应用，这时候可以怎么做呢？

0. 检查浏览器 WebGL 支持度

甩一个 WebGL 支持检查的网站 WebGL Report，每一步之后都可以通过这个网站来查看操作是否成功。
检测地址2：https://browserleaks.com/webgl

1. 重装最新 chrome 浏览器

重装总是能解决90%的奇怪问题

2. 开启 chrome 硬件加速

打开 chrome 设置，『显示高级设置』，找到『系统』，在『使用硬件加速模式』选项前打钩。重启浏览器。

3. 开启 WebGL：--disable-webgl

打开 chrome://flags 面板（将这行字输入地址栏），ctrl/command + f 搜索『--disable-webgl』并启用该选项。重启浏览器。

咦？为什么我没有这个选项？！（请看下去）
其实是因为高版本的 chrome 对 WebGL 的支持已经非常成熟和稳定，在2015年8月的时候，这个选项被当做一个 bug 移除了（详见：https://bugs.chromium.org/p/chromium/issues/detail?id=525739 ），所以那之后发布的 chrome 浏览器就不再显示这个选项，webgl 是默认开启的，也就不需要手动『启用』了。

4. 查看浏览器显卡支持

如果以上方法都行不通，那就比较麻烦了。请继续看下去。

首先，你可以打开 chrome://gpu 查看显卡对浏览器特性的支持度，看看到底是那儿出了问题。Graphic Feature Status 中对 WebGL 一项的支持状态可能为：

Hardware accelerated：WebGL 已启用，并获得了显卡支持
Software only, hardware acceleration unavailable：WebGL 已启用，但没有显卡支持，只有软件渲染支持
Unavailable：WebGL 既没有显卡支持也没有软件支持
WebGL 应用一般需要显卡加速，如果你的浏览器显示 WebGL 未获得显卡支持（即显示为后面两项）则你电脑的显卡可能进入了 chrome 的黑名单。

5. 显卡黑名单

有一些显卡和显卡驱动因为 bug 太多会导致浏览器崩溃甚至系统崩溃，所以很多浏览器都有一个显卡黑名单，对这些有问题的显卡和驱动，浏览器将不启用硬件加速。可以在 chrome://flags 中开启 --ignore-gpu-blacklist 来无视这个黑名单（不推荐，可能会引发浏览器崩溃或者系统崩溃）。chrome 的显卡黑名单在这里：BlacklistsAndWhitelists - WebGL Public Wiki。

5.1 换成Firefox 强行开启 WebGL

我发现在有些操作系统上(如xp)，Firefox浏览器对显卡驱动的版本要求比Chrome低，也就是说，在这些系统版本是Firefox可能可以正常开启WebGL应用当Chrome不能够的时候。
以上来自：How to Enable WebGL for Blocked Graphics Cards in Firefox 这篇文章，关于如何在非常恶劣的情况下用火狐浏览器开启 webgl。是我在搜索 xp 是否支持 webgl 的时候找到的。翻译一下：

以下操作可能很危险！
在火狐的地址栏输入 about:config 进入设置页面，会出现一个⚠️警告页面，请仔细阅读，自己承担风险！
开启 WebGL，把 webgl.force-enabled 设置成 true（双击即可）
开启 Layers Acceleration，把 layers.acceleration.force-enabled 设置成 true
开启 Direct2d 在 win vista 或 win7，把 gfx.direct2d.force-enabled 设置成 true
现在你应该可以使用 WebGL 了。

摘抄自：

• Chrome 不支持 WebGL 怎么办？

记录一下当前vue工程下使用的优化（vue-cli3）：

1. moment.js

方案一：替换为date-fns或dayjs，参考You-Dont-Need-Momentjs (翻译版)

方案二：使用ignorePlugin删除它国际化的部分，具体操作：
在vue.config.js中加入如下配置：

const webpack = require('webpack');

module.exports = {
  chainWebpack: config => {
    config
      .plugin('ignorePlugin')
      .use(webpack.IgnorePlugin, [{
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/,
      }]);
  },
}

使用方式：

const moment = require('moment');
// 引入zh-cn locale文件
require('moment/locale/zh-cn');
moment.locale('zh-cn');

缩减后，大致会缩减至原来的四分之一

2.lodash.js

方法一：单独引入

import {chain, cloneDeep} from 'lodash';
// 可以改写为
import chain from 'lodash/chain';
import cloneDeep from 'lodash/cloneDeep';

方法二：引入lodash-webpack-plugin和babel-plugin-lodash
在vue.config.js中chainWebpack加入

config.plugin("loadshReplace")
        	.use(new LodashModuleReplacementPlugin());//优化lodash

方法三：使用 lodash-es
利用tree-shaking

import {isEmpty, isObject, cloneDeep} from 'lodash-es';

参考：

• 前端工程资源小优化
• Webpack打包优化
• Webpack 按需打包 Loadsh

这几天一直在研究如何通过前端导出docx，实验了几个库，都是用的OOXML(OfficeOpenXML)来导出。我用的环境是@vue/cli3.1.2创建的工程，所以实验了该环境下的各个库(基本是github搜索用javascript写的docx的前几个)：
目前还么有什么结果

• docx-templates，目前推荐这个库，这个库开始总是安装不成功，可能后来升级过可以安装成功。里边可以根据某个模板然后替换，但是模板里边必须使用作者自己定义的语法来实现，类似程序的for和if判断这些，比docxtemplater复杂一些，也比doctemplater全面。

• docxtemplater，该库是从docx模板中，添加一些自定义语法糖，然后绑定数据，导出。这个库很完善，免费部分很好用。最大的缺点是一些基础的东西（比如表格、图片等）是收费的，每个付费模块$300-$400/year。
  PS:目前我使用的是这个库，该库免费提供了一些基础的循环语法和模板，表格也可以应用一些循环语法。该库提供了一个入口可以自己插入OfficeOpenXML，这样可以实现一些复杂应用。

• officegen，这是个老牌的库，各API格式也完善，暂时只支持node端，不支持纯前端，前端安装不成功！但作者回复issue说browser和ES6支持已经在todo-list了，已经在开发中，期待～

• docx.js，该库是从头一点点创建文档，然后通过js-zip导出。但该库还比较基础，文档中的元素也只是作者默认的类型。有序无序列表就无法自定义！同样，作者issue说会列入todo-list

• html-docx-js，这个库是通过转换html格式来生成docx，提供了一个在线编辑器来生成html，相当于作者用html来做语法糖，元素只能限制为作者规定的类型，自定义很困难。

-----------------以上几个库可能需要观望一阵再说，下边的纯粹不成功的-----------------------

• docx4js，这是一个用于解析docx的工具库，方便拆解docx，前边有一些库用到了这个库。
• jsdocx，只找到github地址，没找到使用说明，看demo比较简单一些。看模块划分，只有简单的文字段落，没有复杂的东西，放弃。
• jsreport-html-embedded-in-docx，该库基于jsreport-core来使用，没有安装成功。
• generate-docx，继承自docxtemplater，不完善
  2018.12.06