前端面试系列（七）

生产环境（上线操作注意事项）

1、vue打包命令是什么？

答：vue-cli 生成 生产环境部署资源 的 npm命令：

npm run build

用于查看 vue-cli 生产环境部署资源文件大小的 npm命令：

npm run build --report

2、vue打包后会生成哪些文件？

答：默认生产 dist 文件夹

生产index.html单页面文件

将组件中的 css 编译合并成一个 app.[hash].css 的文件，

js 则在合并后又拆解成 了 3 个文件：

app.[hash].js 包含了所有 components 中的 js 代码

vendor.[hash].js 包含了生产环境所有引用的 node_modules 中的代码

mainfest.[hash].js 则包含了 webpack 运行环境及模块 化所需的 js 代码

0.[hash].js 则是 vue-router 使用了按需加载生产的js文件

3、如何配置 vue 打包生成文件的路径？

答：在 config / index.js 里面配置 vue 生产环境打包生产文件的路径

index属性：配置生成index.html文件的路径地址

assetsRoot属性：配置生成 static静态资源文件们的路径地址

4、vue如何优化首屏加载速度？

答：a.使用npm run build --report命令进行大文件定位

b.路由的按需加载

c.将打包生成后 index.html页面 里面的JS文件引入方式放在 body 的最后

d.用文档的cdn文件代替 npm 安装包

e.UI库的按需加载

f.开启 Gzip 压缩