vue-cli3前端文件开启Gzip加速

vue-cli3前端文件开启Gzip加速

1 分钟 读完 (大约 115 个字)

下载依赖的插件

npm install compression-webpack-plugin -D

配置vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
    configureWebpack: (config) => {
        # 非development环境下进行压缩
        if (process.env.NODE_ENV !== 'development') {
            # GZIP压缩
            return {
                plugins: [
                    new CompressionPlugin({
                        test: /\.(js|css)(\?.*)?$/i,  # 需要压缩的文件正则
                        threshold: 50 * 1024,  # 文件大小大于这个值时启用压缩
                        deleteOriginalAssets: false  # 压缩后是否删除原文件
                    })
                ]
            }
        }
    }
}

配置nginx

开启gzip

1
2
gzip on;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-javascript;

git常用命令

git常用命令

2 分钟 读完 (大约 298 个字) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
git checkout -b dev    #创建一个dev分支并指向它
git push --set-upstream origin dev    #上传dev分支到远端仓库
git branch -D dev    #删除dev分支
git push origin :dev    #删除远端仓库的dev分支

git stash    #当前分支代码未完成且这个时候需要切换到其他分支时，可以使用该命令讲当前修改的代码储藏起来
git stash list    #查看当前分支储藏的代码栈
git stash apply    #使用最后一次储藏的代码
git stash apply stash@{2}    #使用指定位置的储藏代码
git stash drop stash@{2}    #移除指定位置的储藏代码

git merge dev    #合并dev分支代码到当前分支
git checkout dev src/view/index.vue    #dev分支下指定文件代码与当前分支文件合并
git cherry-pick [commit编号]    #合并指定commit代码到当前分支下
git cherry-pick --continue    #cherry-pick合并发生冲突后，已解决所有冲突后使用该命令

git push --force origin dev    #强制push当前分支代码到远端dev分支

git diff [path] 查看尚未暂存的文件更新内容
git diff --cached [path] 查看已暂存的文件更新内容
JavaScript上传TXT文件并预览

JavaScript上传TXT文件并预览

2 分钟 读完 (大约 266 个字)

js实现txt文件预览(支持各种编码格式)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# txtPreview.js
# 引入jschardet获取文件编码
import jschardet from 'jschardet'

##
 # 获取文件的encoding码
 # @param {Object File} file input上传的txt文件
 # @return {String} encoding 返回文件的编码格式
 #
function checkEncoding (file) {
    return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsDataURL(file)  # 获取txt文件的base64码
        reader.onload = function (e) {
            let base64Str = reader.result
            let str = atob(base64Str.split(';base64,')[1])
            let encoding = jschardet.detect(str)  # 通过jschardet获取txt文件对应的编码格式
            encoding = encoding.encoding
            if (encoding === 'window-1252') {
                encoding = 'ANSI'
            }
            resolve(encoding)
        }
    })
}
##
 # 返回file内容
 # @param {Object File} file input上传的txt文件
 # @return {String} 返回txt文件的内容
 #
const txtPreview = (file) => {
    return new Promise((resolve, reject) => {
        checkEncoding(file).then(encoding => {
            let reader = new FileReader()
            reader.readAsText(file, encoding)  # 通过txt文件编码格式获取文件内容（字符串形式）
            reader.onloadend = function (e) {
                resolve(reader.result)
            }
        })
    })
}
export default txtPreview

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<body>
    <form>
        <input type="file" id="files" name="files"/>
    </form>
    <div id="resText" style="word-wrap: break-word; white-space: divpre-wrap;"></div>
    <script>
        import txtPreview from './txtPreview.js'
        document.getElementById('files').addEventListener('change', handleFileSelect, false);
        function handleFileSelect(e) {
            let file = e.target.files[0]
            txtPreview(file).then(res => {
                document.getElementById("resText").innerHTML = res;
            })
        }
    </script>
</body>
</html>

Demo

本文参考文章：

net::ERR_CACHE_WRITE_FAILURE

net::ERR_CACHE_WRITE_FAILURE

3 分钟 读完 (大约 452 个字)

公司的一个url2pdf的node服务中，使用到了puppeteer，当使用puppeteer创建浏览器并page.goto到要生成的HTML页面时，page.on(‘requestfailed’)会捕捉到异常错误：

1
2
3
4
5
page.on('requestfailed', (request) => {
    logger.warn(request.failure().errorText);
})
# logger打印：
net::ERR_CACHE_WRITE_FAILURE  # 缓存写入失败

此时page.goto只会得到一个空白的没任何内容HTML页面，而导致此错误的原因是Link Prefetch

· 什么是链接预取

链接预取是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。

· 预取是否使用HTTPS？

从 Gecko 1.9.1 (Firefox 3.5) 开始，支持获取 https 内容

· 什么是预取提示？

浏览器会查找关系类型(rel)为 next 或 prefetch 的 HTML 或 HTTP Link: header。下面是一个使用 link 标签的例子：

1
<link rel="prefetch" href="/images/big.jpeg">

同样效果的使用 HTTP Link: header 的例子：

1
Link: </images/big.jpeg>; rel=prefetch

Link: header 也可以通过使用 HTML meta 标签定义在 HTML 文档中：

1
<meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">

注意： 不要预取大量的资源，否则您的浏览器就会报net::ERR_CACHE_WRITE_FAILURE错误，所以在开发的过程中，不要大量的预取资源

本文参考文章：

Git Commit规范指南

Git Commit规范指南

3 分钟 读完 (大约 451 个字)

1、优点

  • 可读性好，清晰，不必深入看代码即可了解当前commit的作用
  • 为 Code Reviewing做准备
  • 方便跟踪工程历史
  • 让其他的开发者在运行 git blame 的时候想跪谢
  • 提高项目的整体质量，提高个人工程素质

2、Commit message 格式

1
2
3
4
5
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

其中header部分是必须的，body跟footer可以忽略

3、Header

header部分只有一行，包括三个字段：type(必需)、scope(可选)、subject(必需)

3.1、Header type的类别：

1
2
3
4
5
6
7
8
9
10
feat    : 添加新特性、新功能
fix     : 修复bug
docs    : 仅仅修改了文档
style   : 仅仅修改了空格、格式缩进、逗号等等，不改变代码逻辑，不影响代码运行的变动
refact  : 代码重构，既不是新功能增加，也不是修复bug的改动
perf    : 优化相关，比如性能测试、体验等
test    : 增加测试用例，包括单元测试、集成测试等
chore   : 改变构建流程、或者增加依赖库、工具等
tips    : 增加一些提示信息，例如错误提示等
del     : 删除

如果type类型为 feat 和 fix 时，则该commit将肯定出现在change log之中

3.2、Header scope

scope用于说明commit 影响的范围，比如数据层、控制层、视图层等等，根据项目不同而不同
如果你的修改影响了不止一个 scope，可以使用 * 代替

3.3、Header subject

subject是commit的简短描述，不超过50个字符

4、如何通过commit关闭issue

1
2
3
4
5
6
7
8
9
close #1024
closes #1024
closed #1024
fix #1024
fixes #1024
fixed #1024
resolve #1024
resolves #1024
resolved #1024

完整写法：git commit -m ‘fix($test):修改测试环境下部分bug closes #1024’

参考文档

关注我

最新文章

分类

归档

标签云

ERR_CACHE FileReader WRITE_FAILURE file git gzip jschardet nginx node prefetch txt vue vue-cli3
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×