The skeleton screen can be thought of as a blank version of the page before the data is loaded in, a simple key render path. The user will see a simple style, depicts the skeleton of the general framework of the current page screen page, and then skeleton screen completely replace the placeholder in part by the actual resources, the user will feel content is gradually in the process of loading is presented, reduce the anxiety of the user makes subjective loading process smoothly.
The installation
The page-skeleton-webpack-plugin of Ele. me is adopted here.
npm install --save-dev page-skeleton-webpack-plugin
npm install --save-dev html-webpack-plugin
Copy the codeThe following error message is displayed during the installation
ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.
Copy the codeExecute this command
npm config set puppeteer_download_host=https://storage.googleapis.com.cnpmjs.org
Copy the codeuse
My project is based on vuE-CLI3 scaffolding development.
Step 1 Configure the plug-in
Create a vue.config.js file.
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
const path = require('path')
module.exports = {
configureWebpack: {
plugins: [
new SkeletonPlugin({
pathname: path.resolve(__dirname, './shell'// staticDir: path.resolve(__dirname,'./dist'// Same routes as' output.path ': ['/'], // Add the route to generate skeleton screen to array excludes: ['.van-nav-bar'.'.van-tabbar'] // Need to ignore CSS selector})],}, chainWebpack: (config) => {// Resolve vue-cli3 scaffolding to create project compressed HTML kill <! -- shell --> Causes skeleton screen not to take effectif(process.env.NODE_ENV ! = ='development') {
config.plugin('html').tap(opts => {
opts[0].minify.removeComments = false
return opts
})
}
},
};
Copy the codeCreate a shell folder under the project root. ChainWebpack configuration – This fixes a BUG where vuE-CLI3 packaged skeleton screens do not work
Step 2 Modify the template of the HTML Webpack Plugin plug-in
Inside the root element where you launch your App
<body>
<div id="app"> <! -- shell --></div> <! -- built files will be auto injected --> </body>Copy the codeStep 3: Generate and write skeleton page for interface operation
-
In the development of page by Ctrl | Cmd + enter exhaled plug-in interface, or within the JavaScript in your browser’s console input toggleBar exhaled interaction interface.
-
Click the button in the interface to preview the skeleton page. This process may take about 20 seconds. When the plug-in is ready for the skeleton page, it will automatically open the preview page through the browser
-
Scan the QR code in the preview page to preview the skeleton page on the mobile terminal. You can directly edit the source code in the preview page and write the skeleton page into the shell folder by clicking the write button in the upper right corner.
-
Repackage the application with WebPack, and when the page is restarted, you can see the skeleton structure of the application before retrieving the data.
The final result
The demo address
vbook.langpz.com
My blog and GitHub address
github.com/lanpangzhi
blog.langpz.com
reference
Github.com/cnpm/cnpmjs… Github.com/ElemeFE/pag…