部署和优化

1. 使用webpack的DefinePlugin指定生产环境:

通过plugin中的DefinePlugin配置,我们可以声明’process.env’属性为’development’(开发环境)或者’production’(生产环境),结合npm配置文件package.json中scripts的命令来切换环境模式十分方便。

2. 使用UglifyJs自动删除代码块内的警告语句:

一般在生产环境的webpack配置文件中使用,通过new webpack.optimize.UglifyJsPlugin()来进行配置,删除警告语句可以缩减文件的体积。

3. 使用Webpack hash处理缓存:

当我们需要对发布到线上的文件进行修改时,重新编译的文件名如果和之前版本的相同会引起浏览器无法识别而加载缓存文件的问题。这样我们需要自动的生成带hash值的文件名来阻止缓存。详见:https://segmentfault.com/a/1190000006178770#articleHeader7

4. 使用v-if减少不必要的组件加载:

v-if指令其实很有用处,它可以让我们项目中暂时不需要的组件不进行渲染,等需要用到的时候在渲染,比如某个弹窗组件等。这样我们可以减少页面首次加载的时间和文件量。

results matching ""

    No results matching ""