月份：2020年10月

regex

正则-消除不必要的回溯

回溯是如何产生的?

当遇到限定符时便会产生回溯，限定符例如*，+，？，{2,3}。并且懒惰回溯与贪婪回溯的规则也是不同的。下面将举例说明懒惰回溯与贪婪回溯的区别。

懒惰回溯

目标字符串: Zhui.

贪婪量词：.*

<
<p
Zhui.
Zhui.(回溯)
Zhui.</p
Zhui.</p(回溯)
Zhui.</
Zhui.</(回溯)
Zhui.<
Zhui.<(回溯）
Zhui.
Zhui.<
Zhui.</
Zhui.</p
Zhui.

懒惰回溯

目标字符串：Zhui.

懒惰量词：.*？

<
<p
(0长度匹配)
(回溯）
Z
Z(回溯)
Zh
Zh(回溯)
Zhu
Zhu(回溯)
Zhui
Zhui(回溯)
Zhui.
Zhui.<
Zhui.</
Zhui.</p
Zhui.

回溯失控

当我们想要匹配一个html代码，我们可能会写出这样的正则

正常情况下匹配是良好的，但若是文本缺失一个</html>标签，则会引发疯狂的回溯导致回溯失控。

解决回溯失控

/<html>(?:(?!<head>).)*<head>(?:(?!<title>).)*<title>)(?:(?!<\/title>).)*</title>(?:(?!<\/head>).)*)<\/head>(?:(?!<body>).)*<body>(?:(?!<\/body>).)*<\/body>(?:(?!<\/html>).)*<\/html>/

该方式使用了预查的方式解决了回溯失控的问题，当匹配失败时不会引发回溯失控，但每次触发预查还是会影响性能。

更好的方式

使用预查和反向引用模拟的原子组

（？=（pattern to make atomic））\1

/<html>(?=(.*?<head>))\1(?=(.*?<title>))\2(?=(.*?<\/title>))\3(?=(.*?<\/head>))\4(?=(.*?<body>))\5(?=(.*?<\/body>))\6.*?<\/html>/

当缺少最后一个html标签，最后一个.*会展开至结尾处，因为没有可返回的回溯点。正则每找到一个标签，就退出一个预查，并在预查过程中丢弃回溯位置。反向引用简单的匹配预查中发现的字符，并将它们作为实际匹配的一部分。

标签 regex, 回溯, 正则, 正则优化

webpack

cdn加速

文章作者由zhuishao
发布日期 2020年10月10日
cdn加速有1条评论

这是一篇长期更新的文章，遇到能加速的东西就会记录下来

vue，vuex,vue-router

在public文件中的index.html中

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

在vue.config.js文件中

module.exports = {
    configureWebpack: {
        externals: {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex'
        }
    }
}

moment

<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>

module.exports = {
    configureWebpack: {
        externals: {
            'moment': 'moment',
        }
    }
}

jsencrypt

<script src="https://cdn.bootcdn.net/ajax/libs/jsencrypt/3.0.0-rc.1/jsencrypt.min.js"></script>

module.exports = {
    configureWebpack: {
        externals: {
           'JSEncrypt': 'jsencrypt',
        }
    }
}

lodash

module.exports = {
    configureWebpack: {
        externals: {
           'lodash': '_',
        }
    }
}

标签 cdn

插件

人机校验插件

npm地址https://www.npmjs.com/package/rsa-verify

支持国际化，rsa加密，拖动验证

qi ye wei xin jie tu 1602309074701 - 人机校验插件

qi ye wei xin jie tu 16023091004242 - 人机校验插件

（完）

标签 npm包, rsa加密, 人机交互, 人机校验, 拼图, 滑动

webpack

vue项目打包优化

体积太大，首次加载慢怎么办？

ant design组件按需加载（小项目或项目刚开始可以搞搞）

下载插件

npm i -D babel-plugin-import

babel.config.js

  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
    ],
  ],

main.js去掉以下内容

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);

最后引入ant-design组件

import Vue from 'vue';
import {
  Button, Form, Input, Select, Breadcrumb, Steps,
} from 'ant-design-vue';
Vue.component(Button.name,Button);
...

ant-design/icon按需加载（项目小或项目刚开始可用）

在node_modules中查看ant-design-vue的package.josn用的是什么版本的图标。

qi ye wei xin jie tu 16015405657930 1024x558 - vue项目打包优化

再看node_modules中是否有该文件

qi ye wei xin jie tu 16015413237616 1024x538 - vue项目打包优化

若没有该文件，下载它

npm install --save @ant-design/icons@2.1.1

创建一个文件antdIcon.js,里面导出需要的图标


export { default as EyeOutline } from '@ant-design/icons/lib/outline/EyeOutline';
export { default as EyeInvisibleOutline } from '@ant-design/icons/lib/outline/EyeInvisibleOutline';
export { default as CheckOutline } from '@ant-design/icons/lib/outline/CheckOutline';
export { default as CheckSquareOutline } from '@ant-design/icons/lib/outline/CheckSquareOutline';
export { default as ExclamationCircleOutline } from '@ant-design/icons/lib/outline/ExclamationCircleOutline';
export { default as InfoCircleFill } from '@ant-design/icons/lib/fill/InfoCircleFill';
export { default as CheckCircleFill } from '@ant-design/icons/lib/fill/CheckCircleFill';
export { default as CloseCircleFill } from '@ant-design/icons/lib/fill/CloseCircleFill';
export { default as ExclamationCircleFill } from '@ant-design/icons/lib/fill/ExclamationCircleFill';
export { default as LoadingOutline } from '@ant-design/icons/lib/outline/LoadingOutline';

export {};

在vue.config.js更改映射地址，使用上方的图标。

resolve: {
      alias: { '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/utils/antdIcon.js') },
    },

压缩moment.js

下载webpack

npm i -D webpack

在vue.config.js使用插件

 configureWebpack: {
    plugins: [new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)],
  },

经过这几个步骤后我们包的变化情况如下

qi ye wei xin jie tu 16013615003453 1024x129 - vue项目打包优化

qi ye wei xin jie tu 16014280846225 1024x75 - vue项目打包优化

qi ye wei xin jie tu 16014330398134 1024x188 - vue项目打包优化

包分拆

可以发现，其中还有一个包的体积比较大，我们可以看看他包含了什么东西

qi ye wei xin jie tu 16015429647760 1024x462 - vue项目打包优化

在vue.config.js加入分拆规则

configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vue_rsa: {
            test: /[\\/]node_modules[\\/](vue|jsencrypt)/,
            priority: -8,
          },
          library: {
            test: /[\\/]node_modules[\\/](lodash|moment)/,
            priority: -9,
          },
        },
      },
    },
  },

分拆后结果如下，时间变慢了，因为在外网，但是包的体积确实变小了。

qi ye wei xin jie tu 16015432335094 1024x169 - vue项目打包优化

分拆原理如下

关于webpack4.0打包代码分割optimization.splitChunks的配置详解

如何看包的情况

qi ye wei xin jie tu 16015436242449 1024x536 - vue项目打包优化

npm run build

点击打开report.html

qi ye wei xin jie tu 16015437516225 - vue项目打包优化

标签 vue, vue优化, webpack优化, 减少体积, 加快首次渲染, 包