分类
regex

正则-消除不必要的回溯

回溯是如何产生的?

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

懒惰回溯

目标字符串: <p>Zhui.</p>

贪婪量词:<p>.*</p>

  1. <
  2. <p
  3. <p>
  4. <p>Zhui.</p>
  5. <p>Zhui.</p>(回溯)
  6. <p>Zhui.</p
  7. <p>Zhui.</p(回溯)
  8. <p>Zhui.</
  9. <p>Zhui.</(回溯)
  10. <p>Zhui.<
  11. <p>Zhui.<(回溯)
  12. <p>Zhui.
  13. <p>Zhui.<
  14. <p>Zhui.</
  15. <p>Zhui.</p
  16. <p>Zhui.</p>

懒惰回溯

目标字符串:<p>Zhui.</p>

懒惰量词:<p>.*?</p>

  1. <
  2. <p
  3. <p>
  4. <p>(0长度匹配)
  5. <p>(回溯)
  6. <p>Z
  7. <p>Z(回溯)
  8. <p>Zh
  9. <p>Zh(回溯)
  10. <p>Zhu
  11. <p>Zhu(回溯)
  12. <p>Zhui
  13. <p>Zhui(回溯)
  14. <p>Zhui.
  15. <p>Zhui.<
  16. <p>Zhui.</
  17. <p>Zhui.</p
  18. <p>Zhui.</p>

回溯失控

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

<html>.*?<head>.*?<title>.*?<\/title>.*?<\/head>.*?<body>.*?<\/body>.*?<\/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标签,最后一个.*会展开至结尾处,因为没有可返回的回溯点。正则每找到一个标签,就退出一个预查,并在预查过程中丢弃回溯位置。反向引用简单的匹配预查中发现的字符,并将它们作为实际匹配的一部分。

分类
webpack

cdn加速

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

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': '_',
        }
    }
}
分类
插件

人机校验插件

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

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

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

(完)

分类
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项目打包优化