Vue学习之十二(webpack优化打包及发布上线)

优化总结思路

• 基本打包–>压缩bundle.js和html–>按需加载elementUI和iview–>
  
  • 把静态资源从bundle.js中抽离–>把第三方包从bundle.js中抽离–>css从bundle.js中抽离
  • –>使用vue-router的路由懒加载

打包前,删除我们的dist文件夹

• 安装 clean-webpack-plugin 包
• 在webpack中导入

moment.js打包过程中过大的问题

//只保留moment中的简体中文
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/)

优化处理一 对bundle.js进行拆分

1.按需导入elementUI

• 参考:http://element-cn.eleme.io/#/zh-CN/component/quickstart
• npm install babel-plugin-component -D
• 修改 .babelrc 文件配置

[
    "component",
    {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
    }
]

• 按需导入在main.js中 import {…} from “element-ui”;Vue.use(…); Vue.prototype.$confirm =…

2.抽取图片、字体等静态资源(url-loader)

• limit:阀值
• name:单独抽取出去之后生成的文件名称，建议加上文件夹和文件的hash码（解决浏览器缓存的问题）

3. 抽离第三方包(CommonsChunkPlugin) 非业务代码

• 单入口变多入口(为了让自己的业务代码和第三方包区别开)
• 单出口变多出口 filename:’js/[name]-[hash:5].js’
• 在plugins中配置CommonsChunkPlugin

4.抽离css

• 安装extract-text-webpack-plugin
• 更改loader use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})
• 更改plugins new ExtractTextPlugin("statics/css/styles-[hash:5].css")

优化处理二 路由的懒加载实现按需加载组件

• 目的：提高首屏加载的速度
• 安装 babel-plugin-syntax-dynamic-import
• 在.babelrc的配置文件中使用 ["syntax-dynamic-import"]
• 把我们导入的方式，编程动态导入import(‘路径’)
  const goodsList = () => import('./goodsList.vue')

今日所安装的包

第一次安装:
    包名：babel-plugin-component
    应用场景:按需导入elementUI的组件
    安装方式：cnpm install babel-plugin-component -D

第二次安装:
    包名:clean-webpack-plugin
    应用场景:打包之前，把我们的dist目录干掉
    安装方式:cnpm i clean-webpack-plugin -D

第三次安装:
    包名：extract-text-webpack-plugin
    应用场景:从bundle.js中抽离css到一个单独的文件
    安装方式：cnpm i extract-text-webpack-plugin -D

第四次安装:
    包名：babel-plugin-syntax-dynamic-import 
    应用场景:当我们需要懒加载我们的组件的时候
    安装方式：babel-plugin-syntax-dynamic-import 

Vue的一些面试题目

• 缓存
  1.什么时候出现缓存? GET请求&&url不变的情况下
  2.缓存的优缺点:第二次加载快,首先去浏览器缓存目录下找,如果找到了,直接渲染;如果没有再去服务器加载
  3.如何解决缓存的问题
  添加hash值(hash值是根据我们的内容来生成的,添加在文件名的后面),直接导致url发生变化,需要重新渲染
• 双向数据绑定的原理:
• 模型—>视图
• 视图—>模型—>视图
  
  • 监控data数据中的变化
    Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter
  • 模型视图之间建立对应关系 正则表达式去匹配v-的指令
  • 当数据发生变化,就通知其对应关系

发布项目上线

云虚拟主机 - 发布上线
    1、下载一个工具FileZilla Client
    2、创建站点，连接到阿里云
    3、把我们打包好的静态资源，放到htdocs下面即可

云服务器
    1、连接到我们的阿里云服务器【使用远程桌面连接】

---

parcel

https://www.parceljs.cn/

步骤：
    1、安装全局包：npm install -g parcel-bundler

    2、写代码

    3、打包运行
        在项目根目录，运行 parcel index.html -p 3008 --open

---