This year, HTML5 technology is widely used, front-end development has become a new network H5 red, senior front-end architect, hereby write this article applies to zero-based technology learning H5 white front-end, so that you only use five steps, easily front-end technology to master the dry!
Webpack packaged vue project to optimize
a routing asynchronous loading
the page Vue project is a virtual routing used, the page content is by routing links vue-router configuration to access, SPA single-page application development, for the development of back-end systems, but search engine unfriendly, because last only generate a page.
Search engines rely on links to pages crawling web content, and then search the database record into a search engine, but after vue packed project only one page, so the contents can not be included in the search engine spider course, this is a relatively bad place, of course, the latter can be SEO optimized.
So when your project vue components Many times, after the first packaged-screen rendering optimization is a very important issue, improve performance, increase the loading speed of opening, is very key point.
Now, I will vue in asynchronous routing lazy to do a load sharing method is recommended if the component is not a lot of projects do not use this method will increase the load time and speed, for many of the components of the project can use this method.
Second, the optimization component
because it is the background program, the selected element-ui system set up for background frame, so this can be reduced to optimize the volume, increased speed and reduced loading times, improving the user experience.
Third, the use of Global
Global The introduction and operation
Import from ElementUI 'element-ui'
Vue.use (ElementUI)
This method is for the case of only a small amount of the element-ui assembly, many components are redundant, will virtually increase after the loading time and volume of the packaged item, so the use of this method the following demand can be effectively introduced to solve this problem.
Introducing demand
// demand incorporated
Import {
Form1,
the Button,
the Table,
} from 'element-ui'
@-Demand
Vue.use (Form1)
Vue.use (the Button)
Vue.use (the Table)
copying the code
but also some of the load and the message prompts other components, the following wording:
// demand introducing
Import {
Loading,
the Message,
the MessageBox,
the Notification,
} from 'UI-Element'
@-Demand
Vue.use (Loading.directive)
// mount vue example above
Vue.prototype. $ Loading = Loading.service
Vue.prototype. $ = MsgBox the MessageBox
Vue.prototype. Confirm = $ MessageBox.confirm
Vue .prototype. $ Alert = MessageBox.alert
Vue.prototype. $ prompt = MessageBox.prompt
Vue.prototype. $ = the Message the Message
Vue.prototype. $ = the notify the notification,
use the notification component can, so you can also call, notification (options) or Notification.success (options).
Four, webpack configuration optimization
depend on package size optimization
is well known, the daily development process, this already has begun front-end engineering and component-based development, so inevitably download a variety of node package, so that the volume of the package is very large, the following is a configuration using webpack external expansion can solve these problems.
Five, Gzip compression and optimization sourceMap
this method is a compressed file, nginx server line is also open gzip function better; cancel resource maps, can effectively protect the source.
In webpack build file, open Gzip compression and disable resource maps.
= {module.exports
// ...
Build: {
productionSourceMap: false,
productionGzip: to true,
}
}
to do so, after the package will not have sourceMap files, will be a few more to .js.gz suffix file name.
(This article published by the original source era teacher, please indicate the source.)